CODEWITHSUNDEEP
javascripthtmlcssgoogle-apps-script
Dom
Dom

Reputation: 453

Google App Script setTimeout Function problem

I have a typical Google App Html form that records the data entered in a spreasheet. Here are the files.

HTML Form:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <?!= include("css");?>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message"></div>

  <!--- BUTTON New registration --->
    <br /><input id="button-responder" type ="button" value = "New registration"   
            onclick="submitResponder('button-responder'),
            submitTransition('message');" style="display:none;" />

  <!--- FORM --->   
   <form id="my-form">
    <br /><input id="name" type="text" name="name" placeholder="Your Name">
    <br /><input id="email" type="email" name="email" placeholder="Your Email">
    <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
   <!--- BUTTON submitForm ---> 
    <br /><input id="btn" type="button" value="Submit"
            onclick="submitForm(this.parentNode),
            document.getElementById('my-form').style.display='none',
            submitResponder('button-responder'),submitTransition('message');" />
   </form>
    <?!= include("test-js");?>  
  </body>
</html>

Google Script:

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


function submitData(form) {
  var subject='New Feedback';
  var body=Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);

  var folderId = "my-folder-ID"; // Please set the folder ID.  // Added

  var blob = Utilities.newBlob(body, MimeType.HTML, form.name).getAs(MimeType.PDF);  // Added
  var file = DriveApp.getFolderById(folderId).createFile(blob);  // Added

  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s<br />
  PDF: <a target="_blank" href="%s">see your PDF file</a>',  
  form.name,form.email,form.comment,file.getUrl());

function userClicked(userInfo){
  var url = "https://docs.google.com/spreadsheets/d/my-spreadsheet-ID";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  ws.appendRow([userInfo.name, userInfo.email, userInfo.comment]);
}

test-js

<script>

  function submitForm(form) {
    google.script.run
     .withSuccessHandler(function(value){
       document.getElementById('message').innerHTML = value;
       document.getElementById('name').value = '';
       document.getElementById('email').value = '';
       document.getElementById('comment').value = '';
      }) 
      .submitData(form);
  }

  function submitResponder() {
    var x = document.getElementById("button-responder");
    var xx = document.getElementById("my-form");
    var xxx = document.getElementById("message");
    if (x.style.display === "none") {
      x.style.display = "block";
      xx.style.display = "none";
      xxx.style.display = "block";
    } else {
      x.style.display = "none";
      xx.style.display = "block";
      xxx.style.display = "none";
    }
  }


  function submitTransition() {
    setTimeout(function() {
     document.getElementById('message').style.color = 'blue';}, 2500);
  }


document.getElementById("btn").addEventListener("click",doStuff);
  
  function doStuff(){
    var userInfo = {}
    userInfo.name = document.getElementById("name").value;
    userInfo.email = document.getElementById("email").value;
    userInfo.comment = document.getElementById("comment").value;
  

    google.script.run.userClicked(userInfo);
    document.getElementById("name").value= "";
    document.getElementById("email").value= "";
    document.getElementById("comment").value= "";     
  }

</script>

css:

<style>

 #message {
  color: transparent;
 }

</style>

QUESTION

Now in Google Script file function

function submitData (form)

and in test-js file function

function doStuff ()

they do their job well but with a latency of around 2.5s then for Google Script to file the function

return Utilities.formatString

can show the result (name - email - comment - PDF Url) its conclusion must be awaited, 2.5s.

Functions in variables.

In test-js file function

function submitResponder ()

makes the fields linked to the ID (message) visible with variables

name: example-name
email: example-email
comment: example-comment
PDF: see your example-PDF file

and the field linked to the ID (button-responder)
"New registration" button

Then upon loading the index.html page the form and the "submit" button are shown, edit the fields by clicking on submit the form is hidden, the "New registration" button appears and after about 2.5s the edited fields (name-email ....) also appear.

Click on the button "New registration" below the form reappears as at the beginning, clearly not with a reload page, but simply with

  • display = "none"
  • display = "block"

Now here's the problem I can't solve:

By re-editing the fields and clicking again on submit-form the fields edited the previous time appear again immediately

name: example-name
email: example-email
comment: example-comment
PDF: see your example-PDF file

and after about 2.5s they update with the new edited fields

name: new-name
email: new-email
comment: new-comment
PDF: see your new-PDF file

Now with the function

function submitTransition () { setTimeout (function () { document.getElementById ('message'). style.color = 'blue';}, 2500); }

and with style

#message { color: transparent; }

I'm trying to find a solution to delay (hide) the display of the old fields until the new ones are updated.

It is certainly not the right way.

I hope I have been clear in the explanation, your help will be very much able.

Thanks in advance.

Upvotes: 2

Views: 1905

Answers (1)

Tanaike
Tanaike

Reputation: 201553

  • You want to show the texts and button of "New registration" after "submit" button was clicked and the script of submitData was finished.

If my understanding is correct, how about this modification?

The reason of your issue is that google.script.run is run with the asynchronous process. By this, before the script of submitData is finished, document.getElementById('my-form').style.display='none', submitResponder('button-responder') and submitTransition('message') are run.

Modified script:

Please modify your script as follows.

From:

<br /><input id="btn" type="button" value="Submit"
        onclick="submitForm(this.parentNode),
        document.getElementById('my-form').style.display='none',
        submitResponder('button-responder'),submitTransition('message');" />

To:

<br /><input id="btn" type="button" value="Submit" onclick="submitForm(this.parentNode)" />

And

From:

function submitForm(form) {
  google.script.run
   .withSuccessHandler(function(value){
     document.getElementById('message').innerHTML = value;
     document.getElementById('name').value = '';
     document.getElementById('email').value = '';
     document.getElementById('comment').value = '';
    }) 
    .submitData(form);
}

To:

function submitForm(form) {
  google.script.run
   .withSuccessHandler(function(value){
     document.getElementById('message').innerHTML = value;
     document.getElementById('name').value = '';
     document.getElementById('email').value = '';
     document.getElementById('comment').value = '';

     document.getElementById('my-form').style.display='none';  // Added
     submitResponder('button-responder');  // Added
     submitTransition('message');  // Added
    }) 
    .submitData(form);
}

And, by above modification, you can also remove setTimeout as follows.

From:

function submitTransition() {
  setTimeout(function() {
   document.getElementById('message').style.color = 'blue';}, 2500);
}

To:

function submitTransition() {
  document.getElementById('message').style.color = 'blue';
}

Reference

If I misunderstood your question and this was not the result you want, I apologize.

Upvotes: 2

Related Questions