Form not submitting inside $.ajax success function

Question

I'm validating for duplicate names by using jquery+Ajax. Everything is working fine except that the form is not submitting once everything returns true

What's Happening

• If no name is entered, alert box is showing up stating name is required --> No problem here
• If duplicate name is found, alert box is showing up stating name already exists and form does not submit --> No problem here
• If duplicate name is not found, alert box is showing up (to prove the else part of the condition is working), but the form does not submit. I want the form to go ahead and submit itself in this else part

jQuery Code

$('#form1').submit(function(){

    var name = $('#shelf_name').val();

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
    }
    else
    {                   
        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            context:this,
            success:function(data)
            {
                if(data == 'stop')
                {
                    alert('Shelf name already exists'); // working if duplicate name is found
                }
                else
                {   
                    alert('else working?'); // alert box is showing up if name is not duplicate                                         
                    this.submit(); // but after alert, this line not executing
                }
            }
        });
    }


    return false;

});

HTML Form Tag

<form action="add-shelf-post.php" method="post" id="form1">

check-duplicate-shelf-name.php Page

<?php

include 'confignew.php';

$name = $_POST['name'];

// peforming database operations
.
.
.

// and then

if($db->num_rows($q) == 0)
{
    echo 'go';
}
else
{
    echo 'stop';
}

I'm missing something very obvious. Hopefully someone here can point that out.

After checking with Firebug in Firefox, I indeed got an error. It didn't show up when I was testing with Chrome. Here is the screenshot.

Answer 1

I would check it with jQuery validator at run time, not on submit but another approach is to make a Rest Style call. I think it's not necessary to POST a full form just to check 1 field.

$('#form1').submit(function(){
    //Check not empty
    if(!$('#shelf_name').val()) {
       alert('Shelf name is required');
       $('#shelf_name').focus();
    } else {   
       //Valiate Rest style call             
       $.getJSON("check-duplicate-shelf-name.php/".concat($('#shelf_name').val()), function(data) {
           //If you only have 2 states I would return boolean to faster check ex: if(!data){
           if(data == 'stop') {
               // working if duplicate name is found
               alert('Shelf name already exists'); 
           } else {   
               alert('else working?'); // alert box is showing up if name is not duplicate                                         
               $('#form1').submit(); // but after alert, this line not executing
           }
       });
    }
    return false;
});​

When I said on comments that you can post your form manually not using $(this).submit(); I refer to:

$.ajax({
       url: "./myurl",
       cache: false,
       type: "POST",           
       data: $("#form1").serialize(),
       success:  function(){
               console.log("Submit successful");
   }
});