I am working with a standard Google App Html form that collects data and stores it in a spreadsheet. Below are the details of 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();
}
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";
var blob = Utilities.newBlob(body, MimeType.HTML, form.name).getAs(MimeType.PDF);
var file = DriveApp.getFolderById(folderId).createFile(blob);
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
In the Google Script file, the function
function submitData(form)
and in the test-js file, the function
function doStuff()
work effectively but with a delay of approximately 2.5 seconds. Furthermore, for the function in the Google Script file,
return Utilities.formatString
to display the results (name - email - comment - PDF Url), a 2.5-second waiting period is needed.
Functions as variables.
The function in the test-js file,
function submitResponder()
displays fields associated with the ID (message) along with variables like
name: example-name email: example-email comment: example-comment PDF: see your example-PDF file
as well as the field linked to the ID (button-responder) displaying the "New registration" button.
Upon loading the index.html page, initially, the form and the "submit" button appear. After editing the fields and clicking on submit, the form disappears, the "New registration" button shows up, and after around 2.5 seconds, the updated fields (name, email, etc.) are displayed.
By clicking on the "New registration" button below, the form reappears without reloading the page, simply by adjusting the display property.
However, an issue arises when re-editing the fields and clicking on submit-form again, the previously edited fields show up immediately before updating with the latest changes.
To address this, the function
function submitTransition () { setTimeout (function () { document.getElementById ('message'). style.color = 'blue';}, 2500); }
is used, combined with the CSS styling:
#message { color: transparent; }
An effective solution is sought to hide the display of the old fields until the new updates are completed.
Your input on solving this problem would be greatly appreciated. Thank you in advance.