表单页面是否不等待javascript sweetAlert的响应？

Question

Registration.php Registration.php

<head>
<script>
    function myFunction() {
        var userName=document.getElementById('fname').value;
        var userLastName=document.getElementById('lname').value;
        var userEmail=document.getElementById('email').value;
        var userContact=document.getElementById('contact').value;
       //alert(userContact);
       var phoneno = /^\d{10}$/;
        var letters=/^[A-Za-z]+$/;

       if (letters.test(userName)) {

       }else{
       // swal("First Name contain only letters and whitespaces");
       swal({
        title: "Error!",
        text: "First Name contain only letters and whitespaces",
        type: "error",
        confirmButtonText: "OK"
        })
        exit;
       }

       if (letters.test(userLastName)) {

       }else{
        //alert("Last name contains only letters and whitespaces");
        swal({
            title:"Error!",
            text:"Last name contains only letters and whitespaces",
            type:"error",
            confirmButtonText:"OK"

            })
        exit;
       }
           if (phoneno.test(userContact)) {

       }else{
        //alert(" contact number is of 10 digit");
        swal({
            title:"Error!",
            text:"contact number is of 10 digit",
            type:"error",
            confirmButtonText: "OK"
            })
        exit;
       }
    ///alert("succes");
       //swal({
       // title:"Congratulation!",
       // text:"You are successfully Registreared.",
       // type:"success",
       // confirmButtonText: "OK",
       // })
      swal('Congratulations!','Your are successfully Register','success');

    }
</script>
</head>
    <body>
       <div id='Registration'>
    <form  action='Insert.php' method='post'>
    <table id='myTable'>
        <tr>
            <td id='tableName' colspan='2' style='text-align: center'>Registration</td>
    </tr>
    <tr>
        <td>First Name: </td>
        <td><input  type='text' id='fname' name='fname' required></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td><input type='text' id='lname' name='lname' required></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input type='email' id='email' name='email' required></td>
    </tr>
    <tr>
        <td>Contact:</td>
        <td><input type='text' id='contact' name='contact' required></td>
    </tr>
    <tr>
        <td colspan='2' style='text-align: center'><input  type='submit' id='submit' value='SUBMIT' name='submit' onclick='myFunction()'></td>
    </tr>
</table>
</form>
</div>
 <body>

Here is my sweetAlert function which works fine for error but for success it doesn't work properly. 这是我的sweetAlert函数，可以很好地处理错误，但为了成功，它无法正常工作。 For success it can't wait to get response from sweetAlert. 为了成功，迫不及待地要获得sweetAlert的回应。 Is their any problem in form action='insert.php' method='post'? 他们在action ='insert.php'method ='post'形式中有问题吗？
Please give me proper solution for it? 请给我适当的解决方案吗？

Answer 1

There is nothing with php. php没有任何东西。

This is normal flow of form submission. 这是表单提交的正常流程。 Once last line of onclick handler is executed, then browser starts sending the form to the server. 一旦执行了onclick处理程序的最后一行，浏览器便开始将表单发送到服务器。 Any native browser dialog like alert can pause this process, but none of the custom js alerts. 任何本地浏览器对话框（例如alert都可以暂停此过程，但是没有自定义js警报。 If you want wait until user close an alert, then you should prevent form submission and submit it manually. 如果要等到用户关闭警报，则应阻止表单提交并手动提交。

To prevent form submission(default behaviour) you should return false from your onclick handler - one of possible ways. 为了防止表单提交（默认行为），您应该从onclick处理程序中return false onclick一种可能的方式。
To submit form manually use form.submit() method 要手动提交表单，请使用form.submit()方法
Use second argument of the sval function to add callback which will be executed after user close success dialog - http://t4t5.github.io/sweetalert/ 使用的第二个参数sval功能添加将用户接近成功对话框后执行回调- http://t4t5.github.io/sweetalert/

So the result code may look like this: http://jsfiddle.net/7Ld8L6y5/ 因此结果代码可能看起来像这样： http : //jsfiddle.net/7Ld8L6y5/

function myFunction() {
    var userName=document.getElementById('fname').value;
    var userLastName=document.getElementById('lname').value;
    var userEmail=document.getElementById('email').value;
    var userContact=document.getElementById('contact').value;

    var form = document.getElementById('myForm');
    var onDialogClose = function () {
        console.log(form);
        form.submit();
    };

    var phoneno = /^\d{10}$/;
    var letters=/^[A-Za-z]+$/;

    if (!letters.test(userName)) {
        swal({
            title: "Error!",
            text: "First Name contain only letters and whitespaces",
            type: "error",
            confirmButtonText: "OK"
        });
        return;
    }

    if (!letters.test(userLastName)) {
        swal({
            title:"Error!",
            text:"Last name contains only letters and whitespaces",
            type:"error",
            confirmButtonText:"OK"

        });
        return;
    }

    if (!phoneno.test(userContact)) {
        swal({
            title:"Error!",
            text:"contact number is of 10 digit",
            type:"error",
            confirmButtonText: "OK"
        })
        return;
    }

    swal({
        title: 'Congratulations',
        text: 'Your are successfully Register',
        type: 'success'
    }, onDialogClose);
}

You need to update your html code as well: 您还需要更新html代码：

First you should update your onclick event handler for the submit button to prevent default behaviour - onclick='myFunction(); return false;' 首先，您应该为submit按钮更新onclick事件处理程序，以防止出现默认行为onclick='myFunction(); return false;' onclick='myFunction(); return false;'
Second you should rename your submit button to smth. 其次，您应该将submit按钮重命名为smth。 like send to be able to call default form.submit method. 像send一样可以调用默认的form.submit方法。 Otherwise form.submit will reference to your button - <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> 否则， form.submit将引用您的按钮- <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> form.submit <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> form.submit <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> form.submit <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> form.submit <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'> <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'>

Also your original script contains an error: javascript does not have a built-in exit function. 另外，您的原始脚本还包含一个错误： javascript没有内置的exit功能。 To skip an execution of the rest of a function code and immediately return a control - use the return false; 要跳过其余功能代码的执行并立即返回控件，请使用return false; statement. 声明。

表单页面是否不等待javascript sweetAlert的响应？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-14 16:22:53

表单页面是否不等待javascript sweetAlert的响应？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-14 16:22:53

解决方案1
0 已采纳 2015-10-14 16:22:53