堆栈内存溢出
  简体   繁体   English

如何延迟表单提交

[英]How to delay form submission

 原文  2020-02-14 01:49:03  1   2    javascript/ html/ settimeout

问题描述

I'm working on a basic webform for my beginning Javascript class. I pretty much have all my expected results (assignment covers input validation and storing elements in an array by name), except for the fact that when I submit the form, I'd like to give a 5 second delay from the time I hit submit to when the page redirects.我正在为我的开始 Javascript class 开发一个基本的网络表单。我几乎得到了所有预期的结果（作业包括输入验证和按名称将元素存储在数组中），除了当我提交表单时，我'我想从我点击提交到页面重定向之间有 5 秒的延迟。 This delay is so that user will be able to cancel the order.这种延迟是为了让用户能够取消订单。

From what we have learned in class so far, I would expect I perform this action with a setTimeout block of code- though I haven't been able to work that yet.到目前为止，根据我们在 class 中学到的知识，我希望我使用 setTimeout 代码块执行此操作 - 尽管我还没有能够做到这一点。 My form submission is dependent on a true/false return value from the called function, and I'd like to delay that true value from hitting so quickly.我的表单提交依赖于来自调用的 function 的真/假返回值，我想延迟真值如此快速地命中。 I've attached my full HTML file but the block of code that I'm wondering why it isn't working in particular is this:我附上了完整的 HTML 文件，但我想知道为什么它不起作用的代码块是这样的：

    setTimeout(function() {
                   return true;
               }, 5000);

The first problem I observe when debugging in Chrome is that this doesn't return the True value back to the surrounding code.我在 Chrome 中调试时观察到的第一个问题是，这不会将 True 值返回给周围的代码。

I think that something could be done with jQuery to circumvent this but we haven't covered any of that so I'd like to avoid going that route.我认为可以使用 jQuery 来规避这一点，但我们没有涵盖任何内容，所以我想避免走那条路。

```
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="description" content="Costello Improved">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Costellos Pasta and Pizza</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="costello.css">
</head>

<body>

    <form name="myForm" action="https://costello-pasta.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder(this)">
        <div class="container">

            <div class="row">
                <div class="col-md-12" id="debug">Costello's Online Orders</div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Pasta Bowl</div>
                <div class="col-md-4"> (basic price: $7.50)</div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Pasta</div>
                <div class="col-md-4">
                    <div><input type="radio" name="pastatype" value="0" />Spaghetti (no extra cost)</div>
                    <div><input type="radio" name="pastatype" value="50" />Fettucine (add 50 cents)</div>
                    <div><input type="radio" name="pastatype" value="75" />Fusilli (add 75 cents)</div>
                </div>
                <div class="col-md-4 msg" id="radioLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Sauce</div>
                <div class="col-md-4">
                    <select name="sauce">
                        <option value="0">Pomodoro (no extra cost)</option>
                        <option value="50">Bolognese (add 50 cents)</option>
                        <option value="100">Alfredo (add $1.00)</option>
                    </select>
                </div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Extras</div>
                <div class="col-md-4">
                    <div><input type="checkbox" name="extras" value="200" />Side salad (add $2.00)</div>
                    <div><input type="checkbox" name="extras" value="100" />Bread sticks (add $1.00)</div>
                </div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Name</div>
                <div class="col-md-4"><input type="text" id="name" name="client_name" /></div>
                <div class="col-md-4 msg" id="nameLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Phone</div>
                <div class="col-md-4"><input type="text" id="phone" value="" /></div>
                <div class="col-md-4 msg" id="phoneLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label"><input type="submit" value="Order" /></div>
                <div class="col-md-4" id="totalcost"></div>
                <div class="col-md-4 msg" id="submitMessage"></div>
            </div>
        </div>

    </form>

</body>

<script>
    function calculateOrder() {
        var totalCost = 750;

        //Storing Pasta radio buttons into array.  Iterating through array and adding checked selection's value to the total cost. 
        var submitBool = true;
        var pastaArray = document.getElementsByName('pastatype');
        for (var i = 0; i < pastaArray.length; i++) {
            if (pastaArray[i].checked == true) {
                totalCost = totalCost + parseInt(pastaArray[i].value);
            }
            //Validating Pasta input
        }
        if (pastaArray[0].checked == false && pastaArray[1].checked == false && pastaArray[2].checked == false) {
            document.getElementById('radioLabel').innerHTML = "Required field! (You must choose a pasta)";
            submitBool = false;
        } else {
            document.getElementById('radioLabel').innerHTML = "";
        }

        //Storing sauce selection into an array.  Adding price for selected option.
        var sauceArray = document.getElementsByName('sauce');
        totalCost = totalCost + parseInt(sauceArray[0].value);

        //Storing extras selection(s) into an array.  Adding prices for selected options.   
        var extraArray = document.getElementsByName('extras');

        for (var x = 0; x < extraArray.length; x++) {
            if (extraArray[x].checked == true) {
                totalCost = totalCost + parseInt(extraArray[x].value);
            }
        }


        //Validating Name input
        if (document.getElementById('name').value == "") {
            document.getElementById('nameLabel').innerHTML = "Required field!  Enter your name.";
            submitBool = false;
        } else {
            document.getElementById('nameLabel').innerHTML = "";
        }

        //Validating Phone Number Input
        var phone = document.getElementById('phone').value;
        phone = phone.toString();

        if (document.getElementById('phone').value == null) {
            document.getElementById('phoneLabel').innerHTML = "Required field!  Enter your phone number.";
            submitBool = false;
        } else if (phone[3] != "-") {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else if (phone[7] != "-") {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else if (phone.length > 12 || phone.length < 12) {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else {
            document.getElementById('phoneLabel').innerHTML = "";
        }


        //Form runs if input has been valid in all input options
        if (submitBool == false) {

            return false;
        } else if (submitBool == true){
            var preFixed = totalCost / 100;
            var postFixed = preFixed.toFixed(2);


            document.getElementById('totalcost').innerHTML = "Total Bill: $" + postFixed;

            document.getElementById('submitMessage').innerHTML = "Order is being processed, <a>cancel?</a>"

           setTimeout(function() {
               return true;
           }, 5000);
        }

    }

</script>

</html>
```

2 个解决方案

解决方案1
 2 已采纳  2020-02-14 02:06:32

You can use the onSubmit event and delay the usual functionality.您可以使用onSubmit事件并延迟通常的功能。 I've created a simple demo thus you can understand it easily.我创建了一个简单的演示，因此您可以轻松理解它。 Here after form submission it'll submit the form after 5 seconds, or be canceled if you hit Cancel.提交表单后，它会在 5 秒后提交表单，或者如果您点击取消则被取消。 

 const myForm = document.getElementById('myForm'); myForm.addEventListener('submit', handleSubmit); var submitTimer; function handleSubmit(event) { console.log('submitTimer set'); event.preventDefault(); submitTimer = setTimeout(() => { this.submit(); console.log('Submitted after 5 seconds'); }, 5000) }; function cancel(){ clearTimeout(submitTimer); console.log('Submit Canceled'); }
 <form id="myForm"> <input type="text" name="name"/> <button type="submit">Submit</button> <button type="button" onclick="cancel()" >Cancel</button> </form>

解决方案2
 0  2020-02-14 02:08:42

The setTimeout function calls a function or evaluates an expression after a specified number of milliseconds (in your case 5000). setTimeout function 调用 function 或在指定的毫秒数（在您的情况下为 5000）后计算表达式。 What you did in your code was just to return a boolean without creating a channel to get the value after the time has lapsed.您在代码中所做的只是返回 boolean，而没有创建通道以在时间流逝后获取值。 Since this code is sort of "asynchronous" (it takes time), you can use the inbuilt Promise function to get the value.由于此代码有点“异步”（需要时间），您可以使用内置的 Promise function 来获取值。 In order words, your code could be restructured to something like this:换句话说，您的代码可以重组为如下所示：

getTheBoolValue = () => new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve(true)
  },5000)
})

getTheBoolValue().then(data => console.log(data))

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何延迟提交表格？ - How can I delay the submission of a form? 使用setTimer的表单提交延迟 - Form submission delay using setTimer 在preventDefault（）之后延迟表单提交 - Delay form submission after preventDefault() 延迟表单提交，直到检索到位置 - Delay form submission until location is retrieved 在ajax调用完成之前延迟表单提交 - Delay form submission before ajax call completes 您如何延迟表单提交（到Google表格），以便可以首先通过脚本进行验证？ - How do you delay form submission (to google sheets) so that it can be validated first by a script? 如何取消表格提交？ - How to cancel form submission? 如何防止表单提交 - How to prevent form submission 如何停止表单提交？ - How to stop form submission? jQuery：表单提交后延迟禁用按钮 onclick？ - jQuery: delay disable button onclick after the form submission?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM