7

Something is wrong here, and all the suggestions I've tried from others with similar questions don't seem to work.

I have two files: myPage.html and myCode.gs in google scripts. I have deployed the html file as a web app, and I have figured out (with help) how to make the onclick event for the 'submit' button to trigger the emailTech function from the myCode.gs file just fine.

Now I want to insert the value from the text box in the html file into the email that is called from the onClick event. I have tried document.getElementById('textBoxId').value, but I get the following error "Reference Error: "document" is not defined. " What gives?

myPage.html file:

<html>
<head>
    <title>Test Page</title>
</head>
<body>
<input type="button" onClick="google.script.run.emailTech();" value="Submit" />

<input type="text" value=" " id = "textBox" name = "textBox" />
</body>
    <script type="text/javascript">
    </script>
</html>

myCode.gs file:

  function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

function emailTech(){

  var nameBox = document.getElementById('textBox').value;
  var message = "This is the text box value" + nameBox;
  MailApp.sendEmail("123@xyz.com", "This is the subject", message );
}
user1916075
  • 91
  • 2
  • 4
  • 9

1 Answers1

10

The error message is correct - in your Apps Script function emailTech(), there is no variable in scope that's named document.

You've got two different ways of deploying Apps Script WebApps mixed up. Since you're using the HTML Service (and your user interface is an html file), you can't use the UI Service methods (like getElementById()) to access input values. So, you'll do something different.

To tie the submit button and input field together, use a form, enclosed in <form> tags. The submit button will still have an onclick function, but now it will be a javascript function embedded in your HTML, which will pass all the input from the form to your emailTech() function.

In your apps-script-side handler, you'll receive the form input as an Object, with the fields from the form as key-value pairs. The key is the name from the field.

The general solution is described in this answer. Here's a version that fits your code. I've left out the success and failure handling that Arun shows. You should build in error checking before deploying this in real life, of course.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

function emailTech(form){

  var nameBox = form.techEmail;
  var message = "This is the text box value" + nameBox;
  MailApp.sendEmail("email@somewhere.com", "This is the subject", message );

}

myPage.html

<html>

    <head>
        <title>Test Page</title>
    </head>

    <body>
        <form>
            <input type="text" value=" " name="techEmail" />
            <input type="button" onClick="formSubmit()" value="Submit" />
        </form>
    </body>
    <script type="text/javascript">
        function formSubmit() {
            google.script.run.emailTech(document.forms[0]);
        }
    </script>

</html>
Community
  • 1
  • 1
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
  • Oh, I see why nothing I was trying was working now! Thank you again for all your help, and for the quick response. I greatly appreciate it! – user1916075 May 13 '13 at 18:00
  • Two more things- is it possible to reset the form with the Submit button? Also, if I have several check boxes on the form, how can I call the selected ones so that they print out in the email message? – user1916075 May 20 '13 at 18:30
  • @user1916075 - Take a look at [this answer](http://stackoverflow.com/a/16623275/1677912) for tips about how to reference your check boxes as named values. To reset your form, you can use a [reset button](https://developers.google.com/apps-script/reference/ui/reset-button) or [this trick](http://stackoverflow.com/questions/6247437/refresh-or-clearing-form-after-submitting-it-in-google-apps-script). – Mogsdad May 21 '13 at 23:16
  • I am not sure how your post about referencing the check boxes as named values would work as the boxes were created in an html file via but I am trying to call whether or not the checkboxes were checked from the javascript email function we created earlier in this post.. would it be possible to do something like checkbox1 = form.checkbox and then do some sort of if then statement about whether or not the box has been checked? – user1916075 May 22 '13 at 16:53
  • Rather than continue with a comment-conversation, I suggest submitting another question with the details about what you're trying to do, and what you've tried. You can always refer back to this question as background. – Mogsdad May 22 '13 at 17:00
  • Hello @Mogsdad , I'm facing the same problem like OP but I can't get the solution working...can you please take a look on my question? http://stackoverflow.com/questions/37698752/google-script-get-values-from-input-forms – Valip Jun 08 '16 at 10:14