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

instead of this.submit() write :

document.yourFormName.method = "POST";
document.yourFormName.action = "Relative_URL_to_Go_to";
document.yourFormName.submit();

or if you dont know the formName alternately u can use :

document.forms[0].method = "POST";
document.forms[0].action = "Relative_URL_to_Go_to";
document.forms[0].submit();

Answer 2

Doing remote form validation? Checkout the jquery.validate plugin and its .remote() rule.

Other than that your code looks fine. Here's a working demo: http://jsfiddle.net/dKUSb/7/

Answer 3

Enjoy it's Working..

document.createElement('form').submit.call(document.formname);

Answer 4

Dont try to much check get simple button and addd onclick event in that event put the code below

html code

<input type="button" value="submit" onclick="formsubmit();">

javascript code

    function formsubmit() {
     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
                     $('#form1').submit()
                 }
             }
         });
     }
 }

Answer 5

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");
   }
});