-1

Following up on ToggleButton for Google HtmlService, of which it says in the end:

In the HTML demo code that I provided, I was able to make use of form.myButton.value, but the problem is when I try to use that to update my label from within Google App Code function, just as what the HTML demo code is doing, it always fails and I don't know why.

Here are the details:

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <form id="myForm">
      <br /><input id="name" type="text" name="name" placeholder="Your Name">
      <br /><input id="email" type="email" name="email" placeholder="Your Email">
      <br /><input type="button" name="myButton" value="OFF" style="color:blue"
       onclick="toggle(this);">
      <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
      <br /><input type="button" value="Submit" onclick="submitForm(this.parentNode);" />  
    </form>  
    <script>
      var state = false;

      // Toggles the passed button from OFF to ON and vice-versa.
      function toggle(button) {
        state = !state;
        if (state) {
          button.value = "ON";
        } else {
          button.value = "OFF";
        }
      }

      function submitForm(form) {
        google.script.run
        .withSuccessHandler(function(value){
          document.getElementById('message').innerHTML = value;
          document.getElementById("myForm").reset();
        }) 
        .submitData(form);
      }
    </script>
  </body>
</html>

GAS

// https://stackoverflow.com/questions/59583876/google-apps-script-html-form/

//It works as a dialog
function showTheDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Form")
}

// Test at
// https://jsbin.com/vodamekuxu/edit?html,js,console,output

function submitData(form) {
  Logger.log('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  //return Utilities.formatString('name: %s <br />Email: %s<br />Toggle: %s<br />Comment: %s', form.name,form.email,form.myButton,form.comment);
}

Again, the problem is when I try to update my label from within Google App Code function, just as what the HTML demo code is doing, it always fails and I don't know why.

The above code works, but if switching to use the 2nd return, it will fail (I believe because of the form.myButton part).

xpt
  • 20,363
  • 37
  • 127
  • 216
  • Everything on the form seems to be working for me. I don't know what label you speaking about I don't see any label on your form. Your using placeholders instead. The message is returned from the submitData() function and displayed the div. So I don't see the problems you talking about. Referring to offsite resources is not useful for me anyway because I don't follow most of the links. – Cooper Apr 30 '21 at 02:53
  • @MetaMan, my HTML and GAS contains everything that you need. Please reopen it. If everything is working for you, that's my intention, to show that everything is working. Then you need to comment the first return out and uncomment the 2nd return, when you'll notice things are not working any more. – xpt May 01 '21 at 12:20

1 Answers1

1

I thought that when the form object is sent to Google Apps Script side using google.scrit.run, the button might not be able to be included when the object is parsed. When I tested this, I confirmed the same situation. So in this case, as a workaround, how about parsing the form object in Javascript side?

When your script is modified, it becomes as follows.

Modified script:

Please modify the function submitForm() of your Javascript as follows.

From:
.submitData(form);
To:
.submitData([...form].reduce((o, e) => Object.assign(o, {[e.name]: e.value}), {}));
  • By above modification, the values of buttons can be sent to Google Apps Script side.
  • The value of form at Google Apps Script side is like {"email":"###","comment":"###","name":"###","":"Submit","myButton":"ON"}. If you don't want to sent "":"Submit", please filter the value.
  • In this case, I think that your return Utilities.formatString('name: %s <br />Email: %s<br />Toggle: %s<br />Comment: %s', form.name,form.email,form.myButton,form.comment); in Google Apps Script can be used.

Note:

  • When the form includes the input tab of the file type, the script is a bit complecate. At that time, how about using the Javascript library for parsing the form object for Google Apps Script? Ref
  • When you modified the Google Apps Script, please modify the deployment as new version. By this, the modified script is reflected to Web Apps. Please be careful this.
  • You can see the detail of this at the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".

References:

Tanaike
  • 181,128
  • 11
  • 97
  • 165