Google脚本网络应用提交后变为空白页 [英] Google script web app goes blank page after submit
本文介绍了Google脚本网络应用提交后变为空白页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有输入字段的google脚本网络应用.我希望如果用户要提交数据，则必须输入所有这些字段.因此，我使用"required"属性并调用Submit事件将数据传输到Google表格.不幸的是，使用表单标签和提交事件会将页面定向到空白页面，但是如果删除<form>标签，则无法使用必填属性.我尝试了doGet函数的回调来刷新页面，但是什么也没有发生.那么，对此有什么解决方案吗?
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代码:
<!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 ở đây" 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 đây để 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代码:
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);
}
推荐答案
问题:
preventDefault不称为onSubmit.因此，表单被发布到了Web应用程序内的沙盒用户iframe.
Issue:
preventDefault is not called onSubmit. Hence the form is posted to the sandboxed user iframe inside the web-app.
致电preventDefault.
e.preventDefault();//modified
注意:
请确保#hora的val()不是日期对象，因为日期对象作为参数是非法的，并且不能从客户端传递到服务器.
Note:
Make sure #hora's val() is not a date object as date objects are illegal as parameters and cannot be passed from client to server.
这篇关于Google脚本网络应用提交后变为空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
