Как отложить отправку формы - PullRequest
Новая
       5

Как отложить отправку формы

0 голосов
/ 14 февраля 2020

Я работаю над базовой c вебформой для моего начального Javascript класса. У меня почти все ожидаемые результаты (назначение охватывает проверку ввода и сохранение элементов в массиве по имени), за исключением того факта, что при отправке формы я хотел бы дать 5-секундную задержку с момента нажатия кнопки отправки. когда страница перенаправляет. Эта задержка такова, что пользователь сможет отменить заказ.

Из того, что мы узнали на уроке до сих пор, я ожидаю, что я выполню это действие с блоком кода setTimeout, хотя я пока не смог этого сделать. Моя форма отправки зависит от возвращаемого значения true / false из вызываемой функции, и я бы хотел отложить это истинное значение так быстро. Я приложил свой полный файл HTML, но блок кода, который мне интересно, почему он не работает, в частности, таков: 

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

Первая проблема, которую я наблюдаю при отладке в Chrome в том, что это не возвращает значение True обратно в окружающий код.

Я думаю, что можно было бы что-то сделать с 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 голос
/ 14 февраля 2020

Вы можете использовать событие onSubmit и отложить обычную функциональность. Я создал простую демонстрацию, поэтому вы можете легко ее понять. Здесь после отправки формы она будет отправлена ​​через 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>
0 голосов
/ 14 февраля 2020

Функция setTimeout вызывает функцию или вычисляет выражение через указанное количество миллисекунд (в вашем случае 5000). То, что вы сделали в своем коде, было просто вернуть логическое значение без создания канала, чтобы получить значение по истечении времени. Поскольку этот код является своего рода «асинхронным» (это требует времени), вы можете использовать встроенную функцию Promise, чтобы получить значение. Другими словами, ваш код может быть реструктурирован примерно так: 

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

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