Modify an HTML object with Javascript in a Google Script

Question

Like much of other examples provided by Google on Google scripts, modifying HTML through Javascript inside a success handler doesn't seem to work.

The example is:

<script>
  function updateUrl(url) {
    var div = document.getElementById('output');
    div.innerHTML = '<a href="' + url + '">Got it!</a>';
  }
</script>
<form id="myForm">
  <input name="myFile" type="file" />
  <input type="button" value="Submit"
      onclick="google.script.run
          .withSuccessHandler(updateUrl)
          .processForm(this.parentNode)" />
</form>
<div id="output"></div>

And I've done something quite similar:

<script>
    function clearList(someValue){
        document.getElementById('studentsForm').reset()
    }
    function setStatus(someValue){
        var status = document.getElementById('status');
        status.innerHTML = 'Remark posted.'
    }
</script>

<form name='studentsForm' id='studentsForm'>
    <select name='student'>
        <option value='none'>Select a student...</option>
        options
    </select>
    <br>
    <br>
    <textarea name='comment' rows='10' cols='35'>Type your comment here</textarea><br><br>
    <input type='button' value='Submit' onclick='google.script.run
                                                 .withSuccessHandler(setStatus)
                                                 .processRemark(this.parentNode)'>
</form>
<div id="status"></div>

I've tried running both clearList() and setStatus() functions but neither affected the HTML GUI even thought the server-side function was run successfully.

Is there something else to be done for this to work? Thanks.

Edit: In fact, to illustrate the problem isn't about a server-client communication issue (as far as I understand it), here is a simplified version of the code, with which the HTML isn't modified through the script function call:

<script>
function setStatus(){
  var status = document.getElementById('status');
  status.innerHTML = 'Remark posted.'
}
</script>
<input type='button' value='Test' onclick='setStatus();'>
<div id="status"></div>

Community · Accepted Answer · 2017-05-23 12:07:59Z

1

Just realised the input file, it doesn't work that way with IFRAME sandbox, see issue 4610, a workaround is present in the posts.

Here's my workaround for multiple files: Uploading Multiple Files to Google Drive with Google App Script

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Jul 23, 2015 at 15:05

Kriggs

3,7761 gold badge19 silver badges24 bronze badges

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

5 Comments

neydroydrec Over a year ago

What is the input file you are referring to?

neydroydrec Over a year ago

Sorry, I'll need a bit more of guidance please. I'm not sure to understand what the problem is in the first place.

Kriggs Over a year ago

Your first HTML code has an <input type="file" field, these ones doesn't work with the IFRAME sandbox, the you need to set in the doGet function on the code.gs file. For it to return something you need to remove it from the form and do as Sandy Good says in the post below mine. Also need to review the function processForm and processRemark, they may be the culprit also.

neydroydrec Over a year ago

The bug comments specify: "Forms without file inputs should work correctly." However, in my case I'm not trying to upload a file. I'm simply submitting the form and expect a return to the HTML so I can amend the HTML. That return doesn't work though.

neydroydrec Over a year ago

I've updated the op with a simplified HTML showing how the HTML doesn't get modified through a script call, even though I'm not making any call to a server-side function.

Collectives™ on Stack Overflow

Modify an HTML object with Javascript in a Google Script

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related