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

registration.php的表单页面并未等待来自javascript的响应sweetAlert？

<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'？
请给我适当的解决方案吗？

来源

2015-10-14 dheeraj

没有什么与PHP。

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

为了防止表单提交（默认行为），你应该return false从onclick处理器 - 可能的方式之一。
要提交表单手动使用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代码，以及：

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

而且你原来的脚本包含一个错误：javascript没有内置exit功能。要跳过执行功能代码的其余部分并立即返回控制 - 请使用return false;语句。

来源

2015-10-14 16:22:53

谢谢先生。现在它工作正常。 – dheeraj

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

回答

相关问题