Form submission according to ajax condition is not working

Question

I have a form submission page, call a function at the time of form submission.Include an ajax.Form submission occur or not according to the condition in ajax.Ajax msg have two values 1 and 0,one value at a time.My requirement is when msg==1 form not submit and msg==0 submit form.But now in both cases form is not submitting.

My code is given below.Anybody give any solution?

main page

<form action="addCustomer_basic.php" method="post"
name="adFrm" id="myform" >
<input name="name" type="text"   
 class="txtfld" id="name"    
 value=">" style="width:250px;"/>
<input name="email" type="text" 
class="txtfld" id="email" value=""  style="width:250px;"/>
<input name="submit" type="submit" value="Submit" />
</form>

 <script language="JavaScript">
 $(function() {

 $("#myform").submit(function(e) {
    var $form = $(this);
    var cust_name = $form.find('[name="name"]').val();
       e.preventDefault();// prevent submission
    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 in database");
               return false;     
          }
          else 
           {
          self.submit();
          }
      }
   });


 });

 });
</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;  
 }
 ?>

Answer 1

I've checeked your code, without ajax, and just set directly the msg to 1 or to 2. See my code, now you can simulate it:

    $("#myform").submit(function(e) {
        var $form = $(this);
        e.preventDefault();// prevent submission
        var msg = 2; 
        if (msg === 1) {
            alert("Email Id already excist in database");
            return false;
        } else {
            $form.submit(); //This causes Too much recursion
        }
    });

There are some errors in it.

So, self.submit(); is bad:

TypeError: self.submit is not a function
   self.submit();

You need to rewrite it to $form.submit();

But in that case, if the form needs to submit, you will get an error in your console:

too much recursion

This is because, if it success, then it fires the submit again. But, because in the previous case it was succes, it will be success again, what is fires the submit again, and so on.

UPDATE: Let's make it more clear what happens here. When you submit the form, after you call e.preventDefault() what prevents the form to submit. When ajax need to submit the form, it triggers the submit(), but you prevent it to submit, but ajax condition will true again, so you submit again, and prevent, and this is an inifinte loop, what causes the too much recursion.

NOTE:

if($num>0) Where the $num is come from? There are no $num anywhere in your php file. You also do not fetch your row of your sql query.

• Use mysqli_* or PDO functions instead mysql_* since they are deprecated.

• Avoid sql injection by escaping your variables.

So you need to use like this:

$se = "select * from customer where name='$cust_id' and email='$email'";
$se2 = mysql_query($se);
$num = mysql_num_rows($se2); //NEED THIS!
if ($num > 0) {
    echo $status = 1;
} else {
    echo $status = 0;
}

But i am suggest to use this:

$se = "SELECT COUNT(*) AS cnt FROM customer WHERE name='".mysql_real_escape_string($cust_id)."' and email='".mysql_real_escape($email)."'";
$se2 = mysql_query($se);
$row = mysql_fetch_assoc($se2); //NEED THIS!
if ($row["cnt"] > 0) {
    echo $status = 1;
} else {
    echo $status = 0;
}

Answer 2

By the time your ajax call finishes, submit handler already finished so the submit continues, it's async you know, so the function makes the ajax call and continues executing. You can do something like this http://jsfiddle.net/x7r5jtmx/1/ What the code does is it makes the ajax call, then waits until the ajax success updates the value of a variable, when the value is updated, if the value is 1, no need to do anything, as we already stopped the form from submittin. If the value is 0, then trigger a click on the button to re-submit the form. You can't call submit inside the submit handler, but you can trigger click on the button. You obviously need to change the ajax call, just set msg inside your success.

var data = {
        json: JSON.stringify({
            msg: 0 //change to 1 to not submit the form
        }),
        delay: 1
}

var msg = null;

var echo = function() {    
    return $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: data,
        cache: false,
        success: function(json){
            msg = json.msg;
        }
    });
};

$( "#myform" ).submit(function( event ) {
    echo();

    var inter = setInterval(function(){
        console.log("waiting: " + msg);
        if (msg != null){
            clearInterval(inter);
        }
        if (msg == 0){
            $( "#myform" ).off();  //unbind submit handler to avoid recursion
            $( "#btnn" ).trigger("click"); //submit form
        }
    }, 200);

   return false; //always return false, we'll submit inside the interval
});