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

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: 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.