I have a google script web app with input fields. I would like all of those fields is input required if user want to submit data. Therefore, I used "required" attribute and call submit event to transfer data to google sheet. Unfortunately, using form tag and submit event direct the page to a blank page but if I remove <form> tag I cannot use required attribute. I have tried a callback of doGet function to refresh the page but nothing happen. So, is there any solution for this?
HTML code:
<!DOCTYPE html>
<html>
<head>
<style>
html {
touch-action: manipulation;
}
</style>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Resin Reminder Form</title>
<meta name="viewport" content="width=device-width">
<body>
<div class="container">
<form id="resinSubmit">
<div class="row">
<div class="input-field col s6 m6">
<input placeholder="Nh?p tên ng??i c?p nh?a" id="first_name" type="text" required class="validate">
<label for="first_name">Tên ng??i c?p</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<select id="cellName" required>
<option value="" disabled selected>Ch?n cell c?n c?p nh?a</option>
<option value="Cell 1">Cell 1</option>
<option value="Cell 2">Cell 2</option>
<option value="Cell 3">Cell 3</option>
<option value="Cell 4">Cell 4</option>
<option value="Cell 5">Cell 5</option>
<option value="Cell 6">Cell 6</option>
<option value="Cell 7">Cell 7</option>
<option value="Cell 8">Cell 8</option>
<option value="Cell 9">Cell 9</option>
<option value="Cell 10">Cell 10</option>
<option value="Cell 11">Cell 11</option>
<option value="Cell 12">Cell 12</option>
<option value="Cell 13">Cell 13</option>
<option value="Cell 14">Cell 14</option>
<option value="Cell 15">Cell 15</option>
<option value="Cell 16">Cell 16</option>
<option value="Cell 17">Cell 17</option>
<option value="Cell 18">Cell 18</option>
<option value="Cell 19">Cell 19</option>
<option value="Cell 20">Cell 20</option>
</select>
<label>Ch?n cell c?p nh?a</label>
</div>
<div class="input-field col s6 m6">
<select placeholder="Ch?n tên máy c?n c?p nh?a" id="machineName" required></select>
<label>Ch?n máy c?p nh?a</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6">
<input placeholder="nh?p batch nh?a ? ?ay" type="text" id="batch" required class="validate">
<label for="batch">Nh?p batch nh?a</label>
</div>
<div class="input-field col s4 m4">
<input placeholder="nh?n vào ?ay ?? ch?n" name="time" type="text" required class="timepicker" id="hora">
<label for="timepicker">Ch?n th?i gian h?t nh?a</label>
</div>
</div>
<div class="row">
<div class="col s4 m4">
<button data-target="modal1" class="btn waves-effect waves-light modal-trigger" type="submit" name="action" id="btnSubmit">Xác nh?n
<i class="material-icons right ">send</i></button>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$('#cellName').formSelect();
$('#hora').timepicker({
defaultTime: 'now',
twelveHour: false
});
});
function callEvent() {
var cellSelectedValue = $('#cellName').val();
google.script.run.withSuccessHandler(machineOption).machineNameByCell(cellSelectedValue);
var machineNameDropBoxhtml = '';
function machineOption(data) {
try {
for (var i = 0; i < data.machineNameArray.length; i++) {
machineNameDropBoxhtml += '<option value=' + data.machineNameArray[i] + '>' + data.machineNameArray[i] + '</option>';
}
$('#machineName').html(machineNameDropBoxhtml);
$('#machineName').formSelect();
} catch (error) {
alert(error);
}
}
}
$('#cellName').change(function(e) {
e.preventDefault();
callEvent();
});
$('#cellName').on('touchstart', function(e) {
e.preventDefault();
callEvent();
});
$('#resinSubmit').submit(function(e) {
e.preventDefault;
var helperName = $('#first_name').val();
var cellSelectedValue = $('#cellName').val();
var machineSelected = $('#machineName').val();
var resinBatch = $('#batch').val();
var outOfResinTime = $('#hora').val();
google.script.run.getData(helperName, cellSelectedValue, machineSelected, resinBatch, outOfResinTime);
});
</script>
</body>
</head>
GS code:
function doGet(request) {
var htmlTemplate = HtmlService.createTemplateFromFile('formSubmitPage');
return htmlTemplate.evaluate();
}
function machineNameByCell(cellName) {
var resinFormSubmitSheet = SpreadsheetApp.openById('1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o');
var machineNameDataSheet = resinFormSubmitSheet.getSheetByName('machineName');
var machineNameArray = [];
for (var i = 1; i < 20; i++) {
if (cellName == machineNameDataSheet.getRange(1, i).getValue()) {
var j = 2;
while (machineNameDataSheet.getRange(j, i).getValue() != "") {
machineNameArray.push(machineNameDataSheet.getRange(j, i).getValue());
j++;
}
break;
}
}
this.machineNameArray = machineNameArray;
return this;
}
function getData(helperName, cell, machine, batch, outOfResinTime) {
var resinFormSubmitSheet = SpreadsheetApp.openById('1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o');
var submitDataSheet = resinFormSubmitSheet.getSheetByName('resinReminderData');
var lastUpdatedRow = submitDataSheet.getRange('A1:A').getLastRow();
console.log(helperName);
console.log(cell);
console.log(machine);
console.log(batch);
console.log(outOfResinTime);
submitDataSheet.getRange(lastUpdatedRow + 1, 1).setValue(helperName);
submitDataSheet.getRange(lastUpdatedRow + 1, 2).setValue(cell);
submitDataSheet.getRange(lastUpdatedRow + 1, 3).setValue(machine);
submitDataSheet.getRange(lastUpdatedRow + 1, 4).setValue(batch);
submitDataSheet.getRange(lastUpdatedRow + 1, 5).setValue(outOfResinTime);
}
