Stop a form load based on the return data from an ajax callback

Hello I am working with an ajax post function, where I send data and my callback from PHP returns some data back. Based on the data returned I make the decision, either to go forward or allow the user to stay on the page and make changes.

        if (validateStep(step))
        {
        if(step==1)
        { 
            var data = document.getElementById('hiddenContact').value;
            $.post('/app/controller/action', {'data':data}, function(returndata){if(returndata.match('not Unique'))alert('Contact source already exists'); else if(returndata.match('not posted')){alert("Not posted to the database");return false;}});
        }
        step = step + 1;
        form[0].action = '/app/controller/index/step开发者_JS百科:'+step;
        document.getElementById('step').value = step;
        form[0].submit();
        }

Here I am trying to stop the application going ahead when the return data is matched to "not posted", and I am throwing an alert and then a return false to stop the operation. I am unable to stop the application from going to next step though. Though it is returned false, the operation continues to the next step, but when I comment the last 4 lines which increment the step, set the action and submit, it stays on the page and the alert is thrown.

Does anybody know what I should do in order halt my process from submission??

AJAX calls are asynchronous. The "false" you are returning is on the success callback, not on the handler you have shown there. So the last four steps always execute, before the AJAX call even reaches the server. You can fix this by changing ajax response callback to deal with this, like so:

if (validateStep(step))
{
    var next_step = function() {
        step = step + 1;
        form[0].action = '/app/controller/index/step:'+step;
        document.getElementById('step').value = step;
        form[0].submit();
    }

    if(step==1)
    { 
        var data = document.getElementById('hiddenContact').value;
        $.post('/app/controller/action', { 'data':data }, function(returndata) {
            if (returndata.match('not Unique')) alert('Contact source already exists');
            else if (returndata.match('not posted')) alert("Not posted to the database");
            else next_step();
        });
    }
    else next_step();
}

your process to continue to the next step is outside of your IF statement and will always run.

can you not do this:

    if (validateStep(step))
    {
        if(step==1)
        { 
            var data = document.getElementById('hiddenContact').value;
            $.post('/app/controller/action', {'data':data}, function(returndata){
                if(returndata.match('not Unique')) {
                    alert('Contact source already exists');

                    step = step + 1;
                    form[0].action = '/app/controller/index/step:'+step;
                    document.getElementById('step').value = step;
                    form[0].submit();

                } else if (returndata.match('not posted')){
                    alert("Not posted to the database");
                    return false;
                }
            });
        }
    }