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