使用jquery和html进行表单提交的Ajax

时间:2014-11-13 04:54:03

标签: jquery html ajax

我有一个表单提交页面,在表单提交时调用一个函数。根据ajax中的条件包含ajax.Form提交是否发生。我的代码如下所示。但是它不能正常工作。有人给出任何解决方案?

主页

    <form action="addCustomer_basic.php" method="post"
    name="adFrm"  onSubmit="return validate_form(this)" id="myform" >
    <tr class="oddRow">
     <td width="25%" align="right" valign="top" class="txt"><strong>Name
     : </strong></td>
       <td width="25%" align="left" valign="top">
     <input name="name" type="text"   
     class="txtfld" id="name"    
     value=">" style="width:250px;"/></td>
    <td width="25%" align="right" valign="top" class="txt">
    <strong>Reseller Name : </strong></td>
    <td width="25%" align="left"><input name="reseller_name" 
    id="reseller_name" ype="text" class="txtfld" 
    value="<?=$result_admin['phone_number'];?>"  style="width:250px;"/></td>

  </tr>
  <tr class="evenRow">
    <td align="right" valign="top" class="txt"><strong>Phone Number : </strong></td>
    <td align="left" valign="top"><input name="phone_number"
    type="text" class="txtfld" id="phone_number" value=""  style="width:250px;"/></td>
    <td align="right" valign="top" class="txt"><strong>Email : </strong></td>
    <td align="left" valign="top"><input name="email" type="text" 
    class="txtfld" id="email" value=""  style="width:250px;"/></td>
  </tr>
  </form>

 <script language="JavaScript">

 $(function() {

$("#myform").submit(function(e) {

    var $form = $(this);
    var cust_name = $form.find('[name="name"]').val();

    var email = $form.find('[name="email"]').val();
    $.ajax({
      type: "POST",
      url: 'ajx_customer_mailid.php',
      data:'cust_name='+cust_name + '&email=' + email,
      success: function(msg) 
      { 
      alert(msg);
         if(msg==1) 
         {
            alert("Email Id already excist");     
         }
         else 
         {
             $form.off('submit')
                  .submit();
         }
      }
   });

 return false;   

});

});

 </script>

ajx_customer_mailid.php

 <?php
 require_once("codelibrary/inc/variables.php");
 require_once("codelibrary/inc/functions.php");
 $cust_id=$_POST['cust_name'];
 $email=$_POST['email'];
 $se="select * from customer where name='$cust_id' and email='$email'";
 $se2=mysql_query($se);
 if($num>0)
 {
 echo $status=1;    
 }
else
{
   echo $status=0;  
}
?>

1 个答案:

答案 0 :(得分:0)

你有几个问题。首先,除非另行指定,否则AJAX提交是异步的。这意味着函数validate_form在AJAX调用完成之前从函数末尾返回。由于它不会返回false,因此表单POST正常。其次,成功处理程序内的return从处理程序本身返回 - 而不是validate_form函数。为了使这项工作,我建议您始终从validate_form返回false并在成功处理程序中,在验证成功时手动发布表单(首先删除提交处理程序)。

请注意,下面的代码通过JavaScript附加处理程序,并在成功验证时处理验证和表单提交(msg==1

$(function() {
    $('form[name="adFrm"]').on('submit', function(e) {
        var $form = $(this);
        var cust_name = $form.find('[name="name"]').val();
        var email = $form.find('[name="email"]').val();
        $.ajax({
          type: "POST",
          url: 'ajx_customer_mailid.php',
          data:'cust_name='+cust_name + '&email=' + email,
          success: function(msg) { 
             if(msg==1) {
                alert(msg);     
             }
             else {
                 $form.off('submit')
                      .submit();
             }
          }
       });

       return false;   
     });
});