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

Answer 1

The reason the form is not submitting is that you are returning false from the submit event handler, which causes the default action (submission) to not occur. Even if you call the submit() method, you're still within the submit event handler, which has returned false.

You may want to consider either changing the server-side logic which handles your form submission to also check for duplicates, or attaching the duplicate check ajax post to the blur event of the text box, or a submit button as suggested by @rajesh kakawat (except attaching with jQuery rather than an HTML attribute). Example:

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

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

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
        return false;
    }
});

$('#shelf_name').on('blur', function () {
    var $this = $(this),
        name = $this.val();
    if(name == '')
    {
        alert('Shelf name is required');
        $this.focus();
        return false;
    }

        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            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(); // this should work now
                }
            }
        });
});

I'm not sure why the this.submit(); line was working previously, as I don't know enough about your application, script version, etc.. You may want to consider using jsfiddle to post an example.

Answer 2

I've tested your code and it works in Chrome, IE 8 and Mozilla Firefox. Check whether in your whole page there is an element which contains in it's name attribute value the word submit. If there is rename it. For example an input tag like this: <input type="submit" name="submit" value="Submit Form"/> will cause the error appeared in your Mozilla Firebug.

Furthermore below you can find an alternative solution.

The following solution has been successfully tested in Chrome, IE 8 and Mozilla Firefox.

Alternative Solution

Retrieve the post URL and the data that you want to post and perform a post in the success callback.

The following implementation has been successfully tested in Chrome, IE 8 and Mozilla Firefox. In the success callback, the data to be posted is retrieved and posted to the URL and the result is put to a div with id result. You can modify it in order to fit your needs.

$(document).ready(function() {
    $('#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');
                    }
                    else
                    {   
                        alert('else working?'); 
                        //this.submit();
                        //$(this).submit();

                        // get the post url and the data to be posted
                        var $form = $(this);
                            shelfNameVal = $form.find( 'input[id="shelf_name"]' ).val(),
                            url = $form.attr( 'action' );

                            // Send the form data and put the results in the result div
                            $.post(url, { shelf_name: shelfNameVal },
                                function(data) {
                                    $( "#result" ).empty().append(data);
                                }
                            );
                    }
                }
            });
        }
    return false;
    });
});

I hope this helps.

Answer 3

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

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

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
    }
    else
    {                   
        var istrue = false;        
        $.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');
                    istrue = false;
                }
                else
                {   
                    alert('else working?') // alert box is showing up                           
                    istrue = true;
                }
            }
        });
        return istrue;
    }
});

some thing like this :) cant test

Answer 4

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 5

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 6

We had the same problem and think we sorted out.

The thing is that the .submit() action doesn't work inside the "thread" $.ajax neither $.post. For that you have to add the async:false instruction inside the $.ajax block and submit the form when the $.ajax execution finishes.

Not tested but this is the working idea:

html:

<input type='submit' onClick='javascript:MyCheck(); return false;'>

javacript:

function Mycheck() {

   var result = "";
   $.ajax {
       async:false,
       url: you_url_here,
       timeout: 15000,
       success: function(data) {
            result="success";
       },
       error: function(request, status, err) {
            result="error";
       }
   };

   // Here, if success -> SUBMIT FORM or whatever
   // Only get here if "ASYNC" = FALSE!!!
   if (result == "success") {
       $("form").submit(); // this submits the form
       return;
   } else {
       alert('error');
       // the form will not be post
   }
}