Html UI not outputting correctly in google spreadsheet

Question

I'm kind of new to using coding so I may be missing the obvious here. I'm looking to create something like the output here in this discussion: How can I add multiple inputs from an HTML UI to a Google Spreadsheet?. I used the same code format, but somehow the form is blank when I execute the code? Here is the code as modified:

    addItem.gs
    function openInputDialog() {
      var html = HtmlService.createHtmlOutputFromFile('Index');
      SpreadsheetApp.getUi()
           .showModalDialog(html, 'Make Booking');
    }



  function itemAdd(form) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  sheet.appendRow(["  ", form.name, form.room, form.guesthouse, form.checkin, form.checkout, form.department]);
  return true;
}

The HTML form:

Index.html    
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Name:<br>
    <input type="text" name="name">
    <br>
    Room:<br>
    <input type="text" name="room">
    <br>
    GuestHouse:<br>
    <input type="text" name="guesthouse">
    <br>
    In:<br>
    <input type="date" name="checkin">
    <br>
    Out:<br>
    <input type="date" name="checkout">
    <br>
    Department:<br>
    <input type="text" name="department">
    <br><br>
     <input type="button" value="Submit"
        onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .itemAdd(this.parentNode)" />
    </form>
</html>

When I run the function, the form only has the dialog "Make Booking", the rest of the form is blank. I've scoured the net for what I could be doing wrong, unsuccessfully of course.

Any help would be greatly appreciated.

@Ritz I made a mistake copying the code, the original has the closing tag. — Sam, Aug 22 '17 at 10:54
@Cooper, sorry to ask such a noob question, where would the body tag be put? — Sam, Aug 22 '17 at 10:54
If I add the closing tag, it works for me...can you share the spreadsheet — Ritesh Nair, Aug 22 '17 at 10:56

score 0 · Answer 1 · answered Aug 22 '17 at 15:24

I used most of your code and this should work for you. Code.gs:

function addMyData(form) 
{
  var sh=SpreadsheetApp.getActive().getActiveSheet();
  sh.appendRow([form.name,form.room,form.guesthouse,form.checkin,form.checkout,form.department]);
}

function showMyDialog()
{
  var userInterface=HtmlService.createHtmlOutputFromFile('htmlhelp');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Title');
}

htmlhelp.html:

<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  <body>
  <form>
    Name:<br>
    <input type="text" value="" name="name">
    <br>
    Room:<br>
    <input type="text" value="" name="room">
    <br>
    GuestHouse:<br>
    <input type="text" value="" name="guesthouse">
    <br>
    In:<br>
    <input type="date" name="checkin">
    <br>
    Out:<br>
    <input type="date" name="checkout">
    <br>
    Department:<br>
    <input type="text" value="" name="department">
    <br><br>
     <input type="submit" value="Submit" onClick="google.script.run.addMyData(this.form);google.script.host.close();" />
    </form>
    </body>
</html>

Note: google.script.host.close() will not work deployed as a webapp.

Thanks! Works like a charm! Now I just need to figure out how to ensure the data added goes to a specific range! — Sam, Sep 11 '17 at 13:47

Html UI not outputting correctly in google spreadsheet

1 Answers1