Monday, November 22, 2021

AJAX code snippet using Google Apps Script as backend

A drop-down list called Chapter gets updated by the following code - 

window.addEventListener('load', getChapterData); document.getElementById("board").addEventListener('change', updateChpDropdown); document.getElementById("standard").addEventListener('change', updateChpDropdown); document.getElementById("subject").addEventListener('change', updateChpDropdown); function updateChpDropdown() { if (document.getElementById("dataready").innerHTML == "Yes") { // clear the dropdown document.getElementById("chapter").innerHTML = '<option value="Choose">Chapter</option>'; var ddl = document.getElementById("chapter"); var chosenboard = document.getElementById("board").value; var chosensubject = document.getElementById("subject").value; var chosenstandard = document.getElementById("standard").value; for (var j=0; j < chapObj.length; j++ ) { if (chapObj[j]["boardname"]==chosenboard && chapObj[j]["subjectname"]==chosensubject && chapObj[j]["standardname"]==chosenstandard) { var option = document.createElement("OPTION"); option.innerHTML = chapObj[j]["chaptername"] ; option.value = chapObj[j]["chaptername"] ; ddl.appendChild(option); } } } } function getChapterData() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { chapObj = JSON.parse(this.responseText); document.getElementById("dataready").innerHTML = "Yes"; } }; xmlhttp.open("GET", "https://script.google.com/macros/s/ID_OF_GAS_SCRIPTyL/exec",true); xmlhttp.send(); } </script>

No comments:

Post a Comment