个人中心
gpt4 book ai didi

javascript - Google 脚本网络应用程序提交后变为空白页

转载 作者：行者123 更新时间：2023-12-01 00:46:31 25 4
gpt4 key购买 nike

我有一个带有输入字段的谷歌脚本网络应用程序。如果用户想提交数据，我希望所有这些字段都是必需的输入。因此，我使用“required”属性并调用提交事件将数据传输到谷歌表。不幸的是，使用表单标签和提交事件将页面定向到空白页面，但如果我删除 <form>标签我无法使用必需的属性。我尝试了 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>

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。因此，该表单将发布到网络应用程序内的沙盒用户 iframe。

解决方案:

调用preventDefault。

片段:

e.preventDefault();//modified

注意:

确保#hora的val()不是日期对象，因为日期对象作为参数是非法的，并且无法从客户端传递到服务器。

关于javascript - Google 脚本网络应用程序提交后变为空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57293936/

25 4 0
文章推荐： javascript - 如何从 jQuery 中的同级 div 元素检索一些文本
文章推荐： Python、 Selenium : Isolate Item From Returned List
文章推荐： PHP MYSQL GET方法和两个类
文章推荐： python - 根据条件用真实值填充数据框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com