I'm making a crud web app using google apps script and google sheet. In my web app there are two forms that will be used to input data to google sheet when user hit the submit button. The first form works as i expected, however in the second form, the submit button didn't work. I made the form similar to each other but still the second form don't work. I'm using bootstrap and javascript.
Here is the code of the form:
<form id="FormEstimator" class="p-2 border border-light rounded bg-light" onsubmit="handleSubmit(this)">
<p class="h3 mb-4 text-center">Estimator Monitoring Form</p>
<div id="message"></div>
<input type="text" id="RecId" name="RecId" value="" style="display: none">
<!-- Field input SPK status & show rotten days -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="spkstatus">SPK Status</label>
<select class="form-control" id="spkstatus" name="spkstatus">
<option>Select Status</option>
<option>Not Sent</option>
<option>Done</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="rottendays">Rotten Days</label>
<input type="text" class="form-control" id="rottendays" placeholder="Rotten Days" disabled="disabled">
</div>
</div> <!-- End of SPK Status & rotten days -->
<!-- Field input project id & project status -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="projectid">Project ID</label>
<input type="text" class="form-control" id="projectid" name="projectid" placeholder="Enter Project ID" required>
</div>
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">Project Status</label>
<select class="form-control" id="status" name="status">
<option>Select Status</option>
<option>Survey</option>
<option>R0</option>
<option>R1</option>
<option>R2</option>
<option>R3</option>
<option>BOQ</option>
<option>RAB</option>
<option>CD</option>
<option>Construction</option>
<option>Finish</option>
<option>Loss Design</option>
<option>Loss RAB</option>
<option>Loss Client Issue</option>
<option>IDP Changed</option>
</select>
</div>
</div> <!-- End of Field input project id & project status -->
<!-- Field input idp name & idp class -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">IDP Name</label>
<select class="form-control" id="idp" name="idp" disabled="disabled">
<option>Select IDP</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">IDP Class</label>
<select class="form-control" id="idpclass" name="idpclass" disabled="disabled">
<option>Select Class</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
</div> <!-- End of Field input idp name & idp class -->
<!-- Field input client name & location -->
<div class="form-group">
<label for="clientName">Client Name</label>
<input type="text" class="form-control" id="clientName" name="clientName" placeholder="Enter Client Name" disabled="disabled">
</div>
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control" id="location" name="location" placeholder="Enter location" disabled="disabled">
</div> <!-- End of Field input client name & location -->
<!-- Field input bracket & rooms -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">Bracket</label>
<select class="form-control" id="bracket" name="bracket" disabled="disabled">
<option>Select Bracket</option>
<option>A1</option>
<option>A2</option>
<option>B1</option>
<option>B2</option>
<option>C1</option>
<option>C2</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="Rooms">Rooms</label>
<input type="number" class="form-control" id="rooms" name="rooms" placeholder="Enter total rooms" disabled="disabled">
</div>
</div> <!-- End of Field input bracket & rooms -->
<!-- Field input Project Category, Budget, Design Style -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="projectCategory">Project Category</label>
<select class="form-control" id="projectCategory" name="projectCategory" disabled="disabled">
<option>Select Project Category</option>
<option>Basic</option>
<option>Deluxe</option>
<option>Premium</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="budget">Budget</label>
<input type="number" class="form-control" id="budget" name="budget" placeholder="Enter budget" disabled="disabled">
</div>
<div class="form-group col-md-4">
<label for="designStyle">Design Style</label>
<select class="form-control" id="designStyle" name="designStyle" disabled="disabled">
<option>Select Design Style</option>
<option>Tropical Bliss</option>
<option>Modern Contemporary</option>
<option>Modern Classic</option>
</select>
</div>
</div> <!-- End of Field input Project Category, Budget, Design Style -->
<!-- Field input PE, Traffic, Estimator -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="peName">PE PIC</label>
<select class="form-control" id="peName" name="peName" disabled="disabled">
<option>Select PE PIC</option>
<option>Stephany</option>
<option>Yohanes</option>
<option>Danar</option>
<option>Tetty</option>
<option>Ary</option>
<option>Eza</option>
<option>Rizki</option>
<option>MD</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="estimatorName">Estimator PIC</label>
<select class="form-control" id="estimatorName" name="estimatorName">
<option>Select Estimator</option>
<option>Adira</option>
<option>Meidiana</option>
<option>Dwie</option>
<option>Dini</option>
<option>Muthmaina</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="trafficName">Traffic PIC</label>
<select class="form-control" id="trafficName" name="trafficName" disabled="disabled">
<option>Select Traffic PIC</option>
<option>Yasmin</option>
<option>Felice</option>
<option>Kiky</option>
<option>Mayang</option>
<option>Tantri</option>
</select>
</div>
</div> <!-- End of Field input PE, Traffic, Estimator -->
<!-- Field input BF Date, Design Brief Date-->
<div class="form-row">
<div class="form-group col-md-6">
<label for="bfdate">BF Date</label>
<input type="date" class="form-control" id="bfdate" name="bfdate" disabled="disabled">
</div>
<div class="form-group col-md-6">
<label for="designbrief">Design Brief</label>
<input type="date" class="form-control" id="designbrief" name="designbrief" disabled="disabled">
</div>
</div> <!-- End of Field input BF Date, Design Brief Date-->
<!-- Field input DP1 Date, DP2 Date, LOSS Date-->
<div class="form-row">
<div class="form-group col-md-4">
<label for="dp1date">DP1 Date</label>
<input type="date" class="form-control" id="dp1date" name="dp1date" disabled="disabled">
</div>
<div class="form-group col-md-4">
<label for="dp2date">DP2 Date</label>
<input type="date" class="form-control" id="dp2date" name="dp2date" disabled="disabled">
</div>
<div class="form-group col-md-4">
<label for="lossdate">LOSS Date</label>
<input type="date" class="form-control" id="lossdate" name="lossdate" disabled="disabled">
</div>
</div> <!-- End of Field input DP1 Date, DP2 Date, LOSS Date-->
<!-- Field input G-DRIVE LINK-->
<div class="form-group">
<label for="gdrivelink">G-DRIVE LINK</label>
<input type="text" class="form-control" id="gdrivelink" placeholder="Enter G-Drive Link of the Project">
</div> <!--End of Field input G-DRIVE LINK-->
<h4>Monitoring Items</h4>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">R0 Monitoring Items</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!-- Field input BOQ APP start date & deadline & submission date -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="boqstart">BOQ Start Date</label>
<input type="date" class="form-control" id="boqstart" name="boqstart" required>
</div>
<div class="form-group col-md-4">
<label for="boqdeadline">BOQ Deadline</label>
<input type="date" class="form-control" id="boqdeadline" name="boqdeadline" required>
</div>
<div class="form-group col-md-4">
<label for="boqsubmitted">BOQ Submitted</label>
<input type="date" class="form-control" id="boqsubmitted" name="boqsubmitted">
</div>
</div>
</div>
</div>
</div> <!-- End of Collapsible R0 -->
<!-- Collapsible R1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">R1 Monitoring Items</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<!-- Field input BOQ APP start date & deadline & submission date -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="r1boqstart">R1 BOQ Start Date</label>
<input type="date" class="form-control" id="r1boqstart" name="r1boqstart" required>
</div>
<div class="form-group col-md-4">
<label for="r1boqdeadline">R1 BOQ Deadline</label>
<input type="date" class="form-control" id="r1boqdeadline" name="r1boqdeadline" required>
</div>
<div class="form-group col-md-4">
<label for="r1boqsubmitted">R1 BOQ Submitted</label>
<input type="date" class="form-control" id="r1boqsubmitted" name="r1boqsubmitted">
</div>
</div>
</div>
</div>
</div> <!-- End of Collapsible 1 -->
<!-- Collapsible R2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">R2 Monitoring Items</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<!-- Field input BOQ APP start date & deadline & submission date -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="r2boqstart">R2 BOQ Start Date</label>
<input type="date" class="form-control" id="r2boqstart" name="r2boqstart">
</div>
<div class="form-group col-md-4">
<label for="r2boqdeadline">R2 BOQ Deadline</label>
<input type="date" class="form-control" id="r2boqdeadline" name="r2boqdeadline">
</div>
<div class="form-group col-md-4">
<label for="r2boqsubmitted">R2 BOQ Submitted</label>
<input type="date" class="form-control" id="r2boqsubmitted" name="r2boqsubmitted">
</div>
</div>
</div>
</div>
</div><!-- End of Collapsible R2 -->
<!-- Collapsible R3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">R3 Monitoring Items</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<!-- Field input BOQ APP start date & deadline & submission date -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="r3boqstart">R3 BOQ Start Date</label>
<input type="date" class="form-control" id="r3boqstart" name="r3boqstart">
</div>
<div class="form-group col-md-4">
<label for="r3boqdeadline">R3 BOQ Deadline</label>
<input type="date" class="form-control" id="r3boqdeadline" name="r3boqdeadline">
</div>
<div class="form-group col-md-4">
<label for="r3boqsubmitted">R3 BOQ Submitted</label>
<input type="date" class="form-control" id="r3boqsubmitted" name="r3boqsubmitted">
</div>
</div> <!--End of Field input BOQ-->
</div>
</div>
</div>
</div> <!-- End of Collapsible R3 -->
<button type="submit" class="btn btn-primary">Submit</button>
<input class="btn btn-secondary" type="reset" value="Reset">
</form>
And here's the script:
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", functionInit, true);
//INITIALIZE FUNCTIONS ONLOAD
function functionInit(){
preventFormSubmit();
getLastTenRows();
};
//HANDLE FORM SUBMISSION
function handleSubmit(formObject){
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("FormEstimator").reset();
}
//GET LAST 10 ROWS
function getLastTenRows (){
google.script.run.withSuccessHandler(createTable).getLastTenRows();
}
//GET ALL DATA
function getAllData(){
//document.getElementById('dataTable').innerHTML = "";
google.script.run.withSuccessHandler(createTable).getAllData();
}
//CREATE THE DATA TABLE
function createTable(dataArray) {
if(dataArray){
var result = "<table class='table table-sm' style='font-size:0.9em'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+ //Change table headings to match with the Google Sheet
"<th scope='col'>Delete</th>"+
"<th scope='col'>Edit</th>"+
"<th scope='col'>ID</th>"+
"<th scope='col'>PROJECT_ID</th>"+
"<th scope='col'>STATUS</th>"+
"<th scope='col'>SPK STATUS</th>"+
"<th scope='col'>ROTTEN DAYS</th>"+
"<th scope='col'>IDP</th>"+
"<th scope='col'>IDP CLASS</th>"+
"<th scope='col'>CLIENT NAME</th>"+
"<th scope='col'>LOCATION</th>"+
"<th scope='col'>BRACKET</th>"+
"<th scope='col'>ROOMS</th>"+
"<th scope='col'>PROJECT CATEGORY</th>"+
"<th scope='col'>BUDGET</th>"+
"<th scope='col'>DESIGN STYLE</th>"+
"<th scope='col'>PE</th>"+
"<th scope='col'>ESTIMATOR</th>"+
"<th scope='col'>TRAFFIC</th>"+
"<th scope='col'>BF DATE</th>"+
"<th scope='col'>DESIGN BRIEF</th>"+
"<th scope='col'>BF TO DEBRIEF</th>"+
"<th scope='col'>G-DRIVE LINK</th>"+
"<th scope='col'>DP1 DATE</th>"+
"<th scope='col'>DESIGN TO DP1 DAYS</th>"+
"<th scope='col'>DP2 DATE</th>"+
"<th scope='col'>DP1 TO DP2 DAYS</th>"+
"<th scope='col'>LOSS DATE</th>"+
"<th scope='col'>DESIGN TO LOSS DAYS</th>"+
"<th scope='col'>START DESIGN</th>"+
"<th scope='col'>DEADLINE</th>"+
"<th scope='col'>DESIGN SUBMITTED</th>"+
"<th scope='col'>DESIGN TOTAL DAYS</th>"+
"<th scope='col'>DESIGN DELAY</th>"+
"<th scope='col'>BOQAPP START</th>"+
"<th scope='col'>BOQAPP DEADLINE</th>"+
"<th scope='col'>BOQAPP SUBMITTED</th>"+
"<th scope='col'>BOQ TOTAL DAYS</th>"+
"<th scope='col'>BOQ DELAY</th>"+
"<th scope='col'>RAB START DATE</th>"+
"<th scope='col'>RAB DEADLINE</th>"+
"<th scope='col'>RAB SUBMITTED</th>"+
"<th scope='col'>RAB TOTAL DAYS</th>"+
"<th scope='col'>RAB DELAY</th>"+
"<th scope='col'>RO TOTAL DAYS</th>"+
"<th scope='col'>TOTAL DAYS FROM SLA</th>"+
"<th scope='col'>R0 SLA STATUS</th>"+
"<th scope='col'>R1 START DESIGN</th>"+
"<th scope='col'>R1 DEADLINE</th>"+
"<th scope='col'>R1 DESIGN SUBMITTED</th>"+
"<th scope='col'>R1 DESIGN TOTAL DAYS</th>"+
"<th scope='col'>R1 DESIGN DELAY</th>"+
"<th scope='col'>R1 BOQAPP START</th>"+
"<th scope='col'>R1 BOQAPP DEADLINE</th>"+
"<th scope='col'>R1 BOQAPP SUBMITTED</th>"+
"<th scope='col'>R1 BOQ TOTAL DAYS</th>"+
"<th scope='col'>R1 BOQ DELAY</th>"+
"<th scope='col'>R1 RAB START DATE</th>"+
"<th scope='col'>R1 RAB DEADLINE</th>"+
"<th scope='col'>R1 RAB SUBMITTED</th>"+
"<th scope='col'>R1 RAB TOTAL DAYS</th>"+
"<th scope='col'>R1 RAB DELAY</th>"+
"<th scope='col'>R1 TOTAL DAYS</th>"+
"<th scope='col'>R1 TOTAL DAYS FROM SLA</th>"+
"<th scope='col'>R1 SLA STATUS</th>"+
"<th scope='col'>R2 START DESIGN</th>"+
"<th scope='col'>R2 DEADLINE</th>"+
"<th scope='col'>R2 DESIGN SUBMITTED</th>"+
"<th scope='col'>R2 DESIGN TOTAL DAYS</th>"+
"<th scope='col'>R2 DESIGN DELAY</th>"+
"<th scope='col'>R2 BOQAPP START</th>"+
"<th scope='col'>R2 BOQAPP DEADLINE</th>"+
"<th scope='col'>R2 BOQAPP SUBMITTED</th>"+
"<th scope='col'>R2 BOQ TOTAL DAYS</th>"+
"<th scope='col'>R2 BOQ DELAY</th>"+
"<th scope='col'>R2 RAB START DATE</th>"+
"<th scope='col'>R2 RAB DEADLINE</th>"+
"<th scope='col'>R2 RAB SUBMITTED</th>"+
"<th scope='col'>R2 RAB TOTAL DAYS</th>"+
"<th scope='col'>R2 RAB DELAY</th>"+
"<th scope='col'>R2 TOTAL DAYS</th>"+
"<th scope='col'>R2 TOTAL DAYS FROM SLA</th>"+
"<th scope='col'>R2 SLA STATUS</th>"+
"<th scope='col'>R3 START DESIGN</th>"+
"<th scope='col'>R3 DEADLINE</th>"+
"<th scope='col'>R3 DESIGN SUBMITTED</th>"+
"<th scope='col'>R3 DESIGN TOTAL DAYS</th>"+
"<th scope='col'>R3 DESIGN DELAY</th>"+
"<th scope='col'>R3 BOQAPP START</th>"+
"<th scope='col'>R3 BOQAPP DEADLINE</th>"+
"<th scope='col'>R3 BOQAPP SUBMITTED</th>"+
"<th scope='col'>R3 BOQ TOTAL DAYS</th>"+
"<th scope='col'>R3 BOQ DELAY</th>"+
"<th scope='col'>R3 RAB START DATE</th>"+
"<th scope='col'>R3 RAB DEADLINE</th>"+
"<th scope='col'>R3 RAB SUBMITTED</th>"+
"<th scope='col'>R3 RAB TOTAL DAYS</th>"+
"<th scope='col'>R3 RAB DELAY</th>"+
"<th scope='col'>R3 TOTAL DAYS</th>"+
"<th scope='col'>R3 TOTAL DAYS FROM SLA</th>"+
"<th scope='col'>R3 SLA STATUS</th>"+
"<th scope='col'>CD START DATE</th>"+
"<th scope='col'>CD DEADLINE</th>"+
"<th scope='col'>CD SUBMITTED</th>"+
"<th scope='col'>CD TOTAL DAYS</th>"+
"<th scope='col'>CD DELAY</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
result += "<td><button type='button' class='btn btn-danger btn-xs deleteBtn' onclick='deleteData(this);'>Delete</button></td>";
result += "<td><button type='button' class='btn btn-info btn-xs editBtn' onclick='editData(this);'>Edit</button></td>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
var div = document.getElementById('dataTable');
div.innerHTML = result;
document.getElementById("message").innerHTML = "";
}else{
var div = document.getElementById('dataTable');
div.innerHTML = "Data not found!";
}
}
//DELETE DATA
function deleteData(el) {
var result = confirm("Want to delete?");
if (result) {
var recordId = el.parentNode.parentNode.cells[2].innerHTML;
google.script.run.withSuccessHandler(createTable).deleteData(recordId);
}
}
//EDIT DATA
function editData(el){
var recordId = el.parentNode.parentNode.cells[2].innerHTML; //https://stackoverflow.com/a/32377357/2391195
google.script.run.withSuccessHandler(populateForm).getRecordById(recordId);
}
//POPULATE FORM
function populateForm(records){
document.getElementById('RecId').value = records[0][0];
document.getElementById('projectid').value = records[0][1];
document.getElementById('status').value = records[0][2];
document.getElementById('spkstatus').value = records[0][3];
document.getElementById('rottendays').value = records[0][4];
document.getElementById('idp').value = records[0][5];
document.getElementById('idpclass').value = records[0][6];
document.getElementById('clientName').value = records[0][7];
document.getElementById('location').value = records[0][8];
document.getElementById('bracket').value = records[0][9];
document.getElementById('rooms').value = records[0][10];
document.getElementById('projectCategory').value = records[0][11];
document.getElementById('budget').value = records[0][12];
document.getElementById('designStyle').value = records[0][13];
document.getElementById('peName').value = records[0][14];
document.getElementById('estimatorName').value = records[0][15];
document.getElementById('trafficName').value = records[0][16];
document.getElementById('bfdate').value = records[0][17];
document.getElementById('designbrief').value = records[0][18];
document.getElementById('gdrivelink').value = records[0][20];
document.getElementById('dp1date').value = records[0][21];
document.getElementById('dp2date').value = records[0][23];
document.getElementById('lossdate').value = records[0][25];
document.getElementById('boqstart').value = records[0][32];
document.getElementById('boqdeadline').value = records[0][33];
document.getElementById('boqsubmitted').value = records[0][34];
document.getElementById('r1boqstart').value = records[0][50];
document.getElementById('r1boqdeadline').value = records[0][51];
document.getElementById('r1boqsubmitted').value = records[0][52];
document.getElementById('r2boqstart').value = records[0][68];
document.getElementById('r2boqdeadline').value = records[0][69];
document.getElementById('r2boqsubmitted').value = records[0][70];
document.getElementById('r3boqstart').value = records[0][86];
document.getElementById('r3boqdeadline').value = records[0][87];
document.getElementById('r3boqsubmitted').value = records[0][88];
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Update Record [ID: "+records[0][1]+"]</div>";
}
//RETRIEVE DATA FROM GOOGLE SHEET FOR IDP DROPDOWN
function createIDPDropdown() {
//SUBMIT YOUR DATA RANGE FOR DROPDOWN AS THE PARAMETER
google.script.run.withSuccessHandler(idpDropDown).getDropdownList("Helpers!A1:A");
}
//POPULATE IDP DROPDOWNS
function idpDropDown(values) {
var list = document.getElementById('idp');
for (var i = 0; i < values.length; i++) {
var option = document.createElement("option");
option.value = values[i];
option.text = values[i];
list.appendChild(option);
}
}
//SEARCH DATA
function handleSearchForm(formObject) {
google.script.run.withSuccessHandler(createTable).searchData(formObject);
document.getElementById("search-form").reset();
}
</script>
