205 Apps Script Webform XMLHttpRequest

205 Apps Script Webform XMLHttpRequest

1) Create Project Script

Project name: 205

Script files:

1Util.gs

2TaskMan.gs

3Web.gs

home.html

2) Edit home.html

<html>
<head>
<base target="_top">
</head>
<body>
<form id="formGetTest" name="formGetTest">
<input type="hidden" name="cmd" value="submitdata">
<h3>GET Test Form</h3>
<p>
<label for="name">Name:</label>
<input name="name" type="text" value="" />
</p>
<p>
<label for="pid">Pid:</label>
<input name="pid" type="text" value="" />
</p>
<p>
<label for="age">Age:</label>
<input name="age" type="text" value="" />
</p>
<p class="sendrequest resetaftersubmit"></p>
<input type="submit" value="submit get request" />
</form>
<hr/>
<form id="formPostTest" name="formPostTest">
<input type="hidden" name="cmd" value="submitdata">
<h3>POST Test Form</h3>
<p>
<label for="name">Name:</label>
<input name="name" type="text" value="" />
</p>
<p>
<label for="pid">Pid:</label>
<input name="pid" type="text" value="" />
</p>
<p>
<label for="age">Age:</label>
<input name="age" type="text" value="" />
</p>
<p class="sendrequest resetaftersubmit"></p>
<input type="submit" value="submit post request" />
</form>
<hr/>
<script>
/*utility functions*/
function formToJson(form){var obj={};var elements=form.querySelectorAll("input, select, textarea");for(var i=0;i<elements.length;++i){var element=elements[i];var name=element.name;var value=element.value;if(name){obj[name]=value;}} return obj;}
function jsonToUrlParameters(json){return Object.keys(json).map((i)=>i+=+json[i]).join(&);}
var url=https://script.google.com/macros/s/AKfycbxEzd7rdO6sUHaUDdlq21Cwi_GLOOuJ8Dj93lJK-G2G8NPKhNuy/exec?;
/*DOMContentLoaded*/
document.addEventListener( "DOMContentLoaded", function() {
var formsCollection = document.getElementsByTagName("form");
for(var i=0;i<formsCollection.length;i++)
{
var theForm = formsCollection[i];
theForm.addEventListener( "submit", function( e ) {
e.preventDefault(); /*prevent default submit */
if (theForm.id=="formGetTest"){
requestGetTest(this); /*GET Request*/
}
if (theForm.id=="formPostTest"){
requestPostTest(this); /*POST Request*/
}
}, false); /*addEventListener*/
}/*for*/
})/*DOMContentLoaded*/
/* uses GET Request*/
function requestGetTest(theForm){
var sendparameters=jsonToUrlParameters(formToJson(theForm));
resetForms();
elMessage=document.getElementById(theForm.id).getElementsByClassName("sendrequest")[0];
elMessage.innerHTML = "sending request to server...";
var xhr = new XMLHttpRequest();
xhr.open(GET, url+sendparameters, true);
xhr.onload = function () {
objResponse=JSON.parse(xhr.responseText)
console.log(objResponse);
elMessage.innerHTML =JSON.stringify(objResponse.content);
};
xhr.send();
}
/* uses POST Request*/
function requestPostTest(theForm){
var sendparameters=jsonToUrlParameters(formToJson(theForm));
resetForms();
elMessage=document.getElementById(theForm.id).getElementsByClassName("sendrequest")[0];
elMessage.innerHTML = "sending request to server...";
var xhr = new XMLHttpRequest();
xhr.open(POST, url, true);
//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
objResponse=JSON.parse(xhr.responseText)
console.log(objResponse);
elMessage.innerHTML =JSON.stringify(objResponse.content);

}
}
xhr.send(sendparameters);
}
/*reset forms and form messages*/
function resetForms(){
document.querySelectorAll(form).forEach(function(form) {
form.reset();
});
document.querySelectorAll(.resetaftersubmit).forEach(function(p) {
p.innerHTML="";
});
}
</script>
</body>
</html>

3) Edit Util.gs

/*getHTML*/

function getHTML(file) {

if (!file) {

var outputHtml = HtmlService.createHtmlOutput(<b>Hello, world!</b>);

outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

outputHtml.addMetaTag(viewport, width=device-width, initial-scale=1);

return outputHtml;

};

var outputHtmlFile = HtmlService.createHtmlOutputFromFile(file); /*need to create html file*/

outputHtmlFile.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

outputHtmlFile.addMetaTag(viewport, width=device-width, initial-scale=1);

return outputHtmlFile;

}

/*createHTML*/

function createHTML(htmlcodes) {

if (!htmlcodes) {

var outputHtml = HtmlService.createHtmlOutput(<b>Hello, world!</b>);

outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

outputHtml.addMetaTag(viewport, width=device-width, initial-scale=1);

return outputHtml;

};

var outputHtml = HtmlService.createHtmlOutput(htmlcodes);

outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

outputHtml.addMetaTag(viewport, width=device-width, initial-scale=1);

return outputHtml;

}

/*createJSON*/

function createJSON(data) {

if (!data) {

data = []

};

var outputJson = ContentService.createTextOutput(JSON.stringify({

"status": "success",

"content": data

})).setMimeType(ContentService.MimeType.JSON);

return outputJson;

}

4) Edit TaskMan.gs

/*taskManager*/

function taskMan(cmd, e) {

switch (cmd) {

case "gethome":

return getHTML(home.html)

break;

case "testhtml":

var htmlcodes;

if (!e.parameter.testcodes) {

htmlcodes = <b>Hello, test!</b>;

} else {

htmlcodes = e.parameter.testcodes;

}

return createHTML(htmlcodes)

break;

case "submitdata":

var jsoncodes;

if (!e.parameter) {

jsoncodes = {

test: Hello, test

};

} else {

jsoncodes = e.parameter;

}

return createJSON(jsoncodes)

break;

case "testscriptrun":

return "Test Script Run"

break;

}

5) Edit WebApp.gs

function doGet(e) {

return handleResponse(e);

link download

Online Solutions

Thursday, April 26, 2018