Populate Google Sheet with data from HTML service

Question

I'm creating a Google Sheet with a linked HTML file for users to create and plan business trip itineraries easily. What I need to do is get the info from the HTML doc and populate certain cells on the google sheet when a button is clicked.

Here's a simplified version of my HTML doc:

      <div id = "sortable" class="ui-state">

        <div class = "sortableItem day">Monday</div>
         <div class = "sortableItem swapable ui-state-default" id="result1">Meeting1</div>
         <div class = "sortableItem swapable ui-state-default" id="result2">Meeting2</div>
         <div class = "sortableItem swapable ui-state-default" id="result3">Meeting3</div>
         <div class = "sortableItem swapable ui-state-default" id="result4">Meeting4</div>
         <div class = "sortableItem swapable ui-state-default" id="result5">Meeting5</div>

 <button class="btn btn-success btn-lg center-block" id="click">Update itinerary</button>
</div>

I have code written so that the meeting order can changed with drag and drop. Once the itinerary is in the right order, user should click on the button and it should update the google sheet (Cells A2: A5) with the new meeting order.

I have an array variable that I update with the new meeting order as follows when the button is clicked:

  var newOrder = [];

  $("#click").click(function(){
  for(var i=0; i <= 5; i++) {
  newOrder.push(sortable.children[i].innerHTML)
  }
})

This part is working fine as when I alert newOrder, the array is appearing correctly. But how do I then access this array on the Google Sheet side to update the cells?

Answer 1

In your HTML Button onClick() call this : onClick="google.script.run.withSuccessHandler(saved()).yourServerFunction(this.form)"

HTML Sampple,

<form class="form-style-7" id="myForm">
<ul>
<li>
    <label for="inbox">Inbox Filter</label>
    <input type="text" id="inboxVal" name="inboxVal" maxlength="100">
    <span>Enter Inbox Search Criteria Here</span>
</li>
<li>
    <input type="button" value="Create Rule"  onClick="google.script.run.withSuccessHandler(saved()).processForm(this.form)">
</li>
</ul>
</form>
 <script>
 function saved()
 {
  //Some Activity
 }
 </script>

Here saved() will be called on your HTML page if you want to perform any operation after submitting function.

On server side (ie in Appscript) write a normal function like below,

function yourServerFunction(myForm) {
  Logger.log("INFO:       Processing values: "+myForm.inboxVal);
}