Search code examples
google-apps-scriptgoogle-sheetsweb-applications

Get data from htmlService Form

I'm trying to display data from an HTMLService form in an ui.alert. I tried alternative solutions, none of which seem to work I'm out of ideas at this point, I don't understand why the code isn't working…

(Script is container bound)

AppScript:

function showCustomOrder() {
  const ui = SpreadsheetApp.getUi();
  var html = HtmlService.createTemplateFromFile('CustomOrderHTML')
  .evaluate()
  .setWidth(1000)
  .setHeight(700);
  ui.showModalDialog(html, '🛒 Bestellung');
}
 
 
function processForm(formObject) {
  Logger.log(JSON.stringify(formObject))
  var ui = SpreadsheetApp.getUi();
  ui.alert(JSON.stringify(formObject))
}

HTML:


<body>
    
    <div class="modalbody">

        <div class="divider"></div>

            <div class="modalwrapper">
            
                <form class="inputformwrapper" id="customOrderForm" onsubmit="event.preventDefault(); google.script.run.processForm(this)">

                    <div class="inputblockwrapper">
                        <div class="labelwrapper">
                            <label class="requiredlabel" for="orderName">Produktname</label>
                        </div>

                        <input class="inputfield" 
                            type="text" 
                            placeholder="Gib den Namen deines Wunschartikels ein..." 
                            id="orderName"
                            name="orderName"
                            required>
                    </div>

                    <div class="confirmbuttonwrapper">
                        <input class="confirmbutton" 
                            type="submit" 
                            value="Absenden"  
                            id="orderSubmit">
                    </div>

                </form>

        </div>

    </div>

  </body>

UPDATE: I'm malding right now, for some reason, this code doesn't work in Safari & Firefox. I ran the code from the same sheet in chrome, works just fine… If anyone has a clue why this code isn't cross browser compatible, I'd really appreciate some input.

This is the error form I get from Safari when submitting the form:

[Error] Unsafe JavaScript attempt to initiate navigation for frame with URL 'https://docs.google.com/spreadsheets/d/1GSzlzj7nHPIUt-RIJfsPFobtnLbuoXedtJk1x11BdT0/edit#gid=608101151' from frame with URL 'https://n-5knwkifokitvy7ttzpxm4675zp3t23b2pntbdhy-1lu-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation-by-user-activation' flag is not set and navigation is not triggered by user activation.
Solution

  • This works:

    function showCustomOrder() {
  const ui = SpreadsheetApp.getUi();
  var html = HtmlService.createHtmlOutputFromFile('ah2').setWidth(1000).setHeight(700);
  ui.showModelessDialog(html, 'Title');
}
 
function processForm(formObject) {
  Logger.log(JSON.stringify(formObject))
  var ui = SpreadsheetApp.getUi();
  ui.alert(JSON.stringify(formObject))
}

    html:

    <!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <div class="modalbody">
    <div class="divider"></div>
    <div class="modalwrapper">
      <form class="inputformwrapper" id="customOrderForm" onsubmit="event.preventDefault(); google.script.run.processForm(this)">
        <div class="inputblockwrapper">
          <div class="labelwrapper">
            <label class="requiredlabel" for="orderName">Produktname</label>
          </div>
          <input class="inputfield" type="text" placeholder="Gib den Namen deines Wunschartikels ein..." id="orderName" name="orderName" required>
        </div>
        <div class="confirmbuttonwrapper">
          <input class="confirmbutton" type="submit" value="Absenden" id="orderSubmit/">
        </div>
      </form>
    </div>
  </div>
</body>
</html>

    Form after getting filled out:

    enter image description here

    The Alert:

    enter image description here