表单页面未等待 javascript sweetAlert 的响应？

Question

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>

这是我的 sweetAlert 函数，它在出错时工作正常，但在成功时却不能正常工作。为了成功，它迫不及待地想得到 sweetAlert 的响应。他们在表单 action='insert.php' method='post'?
中有什么问题吗请给我适当的解决方案吗？

Answer 1

php没有任何内容。

这是表单提交的正常流程。一旦执行了最后一行 onclick 处理程序，浏览器就会开始将表单发送到服务器。任何像 alert 这样的本机浏览器对话框都可以暂停此过程，但是 none 的自定义 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 控件 - 使用 return false; 语句。

表单页面未等待 javascript sweetAlert 的响应？

Form page is not waiting for response from javascript sweetAlert?

javascript

php

sweetalert