Cannot Pass InputBox String value From HTML To Google Apps Script

Question

I created a sidebar for a Google Document that takes in user input. I'd like to use the collected data to update some fields on my document, but for now, I am just trying to display the data collected on screen via an alert to test if my code is working. Unfortunately, I am stuck and not sure what I am doing wrong.

There are two problems I am running into, but due to my limited knowledge of app script and coding as a whole, I just can't seem to resolve my issue. The problems I am having are, 1) my eventListener may not be be firing and 2) I can't seem to access the data collected from the input boxes.

Could someone assist me with this problem? I've been searching through the forum for an answer for a few days now, but again, my knowledge is very limited so it's possible I've come across the answer a few times, but just don't understand it. The code I am using is below and a link to my document is here.

App Script Code:

function onOpen() {
  // Add a custom menu to the document.
  var ui = DocumentApp.getUi(); // Or SpreadsheetApp or SlidesApp or FormApp.
  ui.createMenu('Menu')
      .addItem('Sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  // Create HTML template from a file
  var html = HtmlService.createHtmlOutputFromFile('userform')
       .setTitle("TEST FORM")
       .setWidth(300);
  DocumentApp.getUi()
       .showSidebar(html);
}


function appendData(data) {
   DocumentApp.getUi().alert(data.f + ' ' + data.l);
}

HTML code

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="container">
             <div>
                <input id="firstName" type="text" name="firstName" placeholder="Enter first name">
             </div>

             <div>
                <input id="lastName" type="text" name="lastName" placeholder="Enter last name">
             </div>

             <div>
                <input type="button" value="SUBMIT" onClick="submitData();"/>
             </div>
   </div> <!-- End of container div -->

   <script>


   function submitData() { 

      var fName = document.getElementById('firstName').value;
      var lName = document.getElementById('lastName').value;
      var data {
         f: fName,
         l: lName
      };

      google.script.run.appendData(data);
   }
   </script>
  </body>
</html>

Cooper · Accepted Answer · 2019-11-22 20:52:18Z

1

Try this:

function submitData() { 
  var first=document.getElementById('firstname').value;
  var last=document.getElementById('lastname').value;
  var data={f:first,l:last};
  google.script.run.appendData(data);
}

for simplicity you could also change this <button id="btn">Submit</button> to this <input type="button" value="Submit" onClick="submitData();" />

answered Nov 22, 2019 at 20:52

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rodney Over a year ago

Hi and thanks for you help. First, I'm feeling a bit silly that I didn't even notice I totally forgot the document object in my submitData function. Anyway, I'll definitely take you up on the simplify offer, however it's still not working. My appendData function keeps throwing a ' ReferenceError ' that f, I'm sure l as well, is not defined. Any suggestions?

Cooper Over a year ago

Did you modify your question with the updated code. I can take a look at it and see if I can figure out what's not working but I'd prefer to work on the most recent version.

Collectives™ on Stack Overflow

Cannot Pass InputBox String value From HTML To Google Apps Script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related