表单页面不等待来自 javascript sweetAlert 的响应？答案

【问题标题】：Form page is not waiting for response from javascript sweetAlert?表单页面不等待来自 javascript sweetAlert 的响应？
【发布时间】：2015-10-14 14:40:00
【问题描述】：

<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>

这是我的 sweetAlert 函数，它可以很好地处理错误，但如果成功，它就不能正常工作。为了成功，它迫不及待地想要得到 sweetAlert 的响应。他们的表单 action='insert.php' method='post' 有什么问题吗？
请给我适当的解决方案？

【问题讨论】：

标签： javascript php sweetalert

【解决方案1】：

php 什么都没有。

这是表单提交的正常流程。一旦onclick 处理程序的最后一行被执行，浏览器就会开始将表单发送到服务器。任何像 alert 这样的本机浏览器对话框都可以暂停这个过程，但没有任何自定义 js 警报。如果您想等到用户关闭警报，那么您应该阻止表单提交并手动提交。

为了防止表单提交（默认行为），您应该从您的 onclick 处理程序中 return false - 一种可能的方法。
手动提交表单使用form.submit()方法
使用sval 函数的第二个参数添加回调，该回调将在用户关闭成功对话框后执行 - http://t4t5.github.io/sweetalert/

所以结果代码可能如下所示：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);
}

您还需要更新您的 html 代码：

首先你应该为submit按钮更新你的onclick事件处理程序以防止默认行为 - onclick='myFunction(); return false;'
其次，您应该将submit 按钮重命名为smth。像send 能够调用默认的form.submit 方法。否则 form.submit 将引用您的按钮 - <input type='submit' id='send' value='SUBMIT' name='send' onclick='myFunction(); return false;'>

您的原始脚本也包含一个错误：javascript 没有内置的exit 函数。要跳过函数代码其余部分的执行并立即返回控件 - 使用 return false; 语句。

【讨论】：