Javascript 谷歌脚本web应用在提交后变为空白页面_Javascript_Google Apps Script_Web Applications_Submit_Form Submit

Javascript 谷歌脚本web应用在提交后变为空白页面

javascript google-apps-script web-applications

Javascript 谷歌脚本web应用在提交后变为空白页面,javascript,google-apps-script,web-applications,submit,form-submit,Javascript,Google Apps Script,Web Applications,Submit,Form Submit,我有一个带有输入字段的google脚本web应用程序。如果用户想要提交数据，我希望所有这些字段都是必需的。因此，我使用“required”属性和调用submit事件将数据传输到GoogleSheet。不幸的是，使用form标记和submit事件会将页面指向空白页面，但如果我删除标记，则无法使用required属性。我尝试了一个doGet函数的回调来刷新页面，但是什么也没发生。那么，有什么解决办法吗 HTML代码： <!DOCTYPE html> <html> <h

我有一个带有输入字段的google脚本web应用程序。如果用户想要提交数据，我希望所有这些字段都是必需的。因此，我使用“required”属性和调用submit事件将数据传输到GoogleSheet。不幸的是，使用form标记和submit事件会将页面指向空白页面，但如果我删除

标记，则无法使用required属性。我尝试了一个doGet函数的回调来刷新页面，但是什么也没发生。那么，有什么解决办法吗

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>


html{
触摸动作：操作；
}
树脂提醒表
滕宁ười cấP
中国ọn细胞cầ北卡罗来纳州ấ新罕布什尔州ựA.
第1单元
第2单元
第三单元
第4单元
第5单元
第6单元
第7单元
第8单元
第9单元
第10单元
第11单元
第12单元
第13单元
第14单元
15号牢房
第16单元
17号牢房
第18单元
第19单元
20号牢房
中国ọn细胞cấ新罕布什尔州ựA.
中国ọ新墨西哥州ấ新罕布什尔州ựA.
新罕布什尔州ập批次nhựA.
中国ọ第n条ờ伊吉安hế新罕布什尔州ựA.
新罕布什尔州ậN
发送
$（文档）.ready（函数（）{
$（'#cellName'）.formSelect（）；
$（'#hora'）。时间选择器({
defaultTime:“现在”，
十二小时：错
});
});
函数callEvent（）{
var cellSelectedValue=$（'#cellName'）.val（）；
google.script.run.withSuccessHandler（machineOption.machineNameByCell（cellSelectedValue）；
var machineNameDropBoxhtml=''；
功能机器选项（数据）{
试一试{
对于（变量i=0；i


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);
}

功能数据集（请求）{
var htmlTemplate=HtmlService.createTemplateFromFile（'formSubmitPage'）；
返回htmlTemplate.evaluate（）；
}
函数machinenabeycell（cellName）{
var ResInfo格式提交表=电子表格应用程序openById（'1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o'）；
var machineNameDataSheet=resinFormSubmitSheet.getSheetByName（'machineName'）；
var machinenaarray=[]；
对于（变量i=1；i<20；i++）{
if（cellName==machineNameDataSheet.getRange（1，i）.getValue（））{
var j=2；
while（machineNameDataSheet.getRange（j，i）.getValue（）！=“”）{
push（machineNameDataSheet.getRange（j，i.getValue（））；
j++；
}
打破
}
}
this.machinenaarray=machinenaarray；
归还这个；
}
函数getData（helperName、单元格、机器、批处理、outOfResinTime）{
var ResInfo格式提交表=电子表格应用程序openById（'1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o'）；
var submitDataSheet=resinFormSubmitSheet.getSheetByName（'resinReminderData'）；
var lastUpdatedRow=submitDataSheet.getRange（'A1:A'）.getLastRow（）；
console.log（helperName）；
控制台日志（单元）；
控制台日志（机器）；
控制台日志（批处理）；
控制台日志（超时）；
submitDataSheet.getRange（lastUpdatedRow+1,1）.setValue（helperName）；
submitDataSheet.getRange（lastUpdatedRow+1,2）.setValue（单元格）；
submitDataSheet.getRange（lastUpdatedRow+1,3）.setValue（machine）；
submitDataSheet.getRange（lastUpdatedRow+1,4）.setValue（批处理）；
SubmitData.getRange（lastUpdatedRow+1,5）.setValue（outOfResinTime）；
}
我认为这两个功能应该分开：
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);
    }
  }
}

函数callEvent（）{
变量cellSelectedValue=$
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);
  }
}

e.preventDefault();//modified