Stop then restart submit() after ajax check

Question

I asked a question [here] recently and it's just not providing me with an answer. Here's what I want to do and you can see my first attempt at the link above:

1. User submits form
2. Stop default submit action
3. check to see if a similar entry exists in database
   1. If it does, display a notice asking them if they want to submit anyway and give an option to let them submit anyway (enable default action and submit it).
   2. If it does not, enable the default action on the form and let it submit

I'm at a loss. Any help is appreciated. Thanks gang.

EDIT for Simeon: Here is the code I'm using with your solution:

var forceSubmitForm = false;
$('#purchaser_contact').submit(function(){

  if(forceSubmitForm) return true;

  if( $("#id").val()=="" ){

    if( $("#fname").val()=='' || $("#city").val()=='' ){ alert('First Name and City are required fields. Please fill these in before continuing.'); return false; }

      $.ajax({
        type: "POST",
        url: 'ajax/contactSearch.php',
        data: ({ fname: $("#fname").val(), lname: $("#lname").val(), city: $("#city").val(), state: $("#state").val() }),
        success: function(d) {
            var obj = JSON.parse( d );
            if(obj.result != 0){
            $("#contactSearch").remove();
            $("#button-wrapper").before('<div id="contactSearch">'+obj.result+'</div>');
            $("#contactSearch").slideToggle('slow');                                
          } else {
            forceSubmitForm = true;
            $('#purchaser_contact').submit(); // Form will submit
          }
        }
      });   

      return false;

  } //END IF empty id

});     

This won't work until the submit button is pushed a second time (ie, $('#purchaser_contact').submit(); is not submitting the form).

EDIT This never did work for me but Simeon's answer is the closest and he claims it works in all major browsers so if it helps someone, great.

Answer 1

well, it's just some kind of internal logic.

$('yourform').bind('submit', function(e){
  e.preventDefault();

  $.ajax({
     url: 'yourpath',
     type: 'POST',
     data: {
        formdata: $(this).serialize(),
        check: 'true'
     },
     dataType: 'something',
     success: function(data){
        if(data == 'already_exists'){
           // show some info along with a button or
           // javascript confirm()
           // send a second $.ajax() request with some additionala query like write=1
        }
     }
  });
});

Kind Regards

--Andy

Answer 2

You can process the form by adding a callback function to the submit event. If you want to stop the submit from going through you can preventDefault() on the event or return false.

$('form').submit(function(event) {
   event.preventDefault();

   //do stuff, you can put your ajax call here
   ...

   if(fail) { return false; }
   else { return true; }
});

Answer 3

This is the solution you are looking for.

var forceSubmitForm = false;
$('#myForm').submit(function(){
    if(forceSubmitForm) return true;
    $.ajax({
        // ...
        success: function(data){
            if(data.entry != 'OK'){ // or whatever check
                forceSubmitForm = true;
                $('#myForm').submit(); // Form will submit
            }else{
                // Form will not be submitted
            }
        }
    });
    return false;
});

EDIT To prove to myself that this methodology works, I just created a sample page with a form and a submit button. This worked fine in all major browsers:

$(function(){ // On DOM ready
    var forceSubmitForm = false;

    $('#purchaser_contact').live('submit', function() {
        if (forceSubmitForm){
            alert('submitting');
            return true;
        }

        // A callback function works in the same manner as a timeout

        setTimeout(function(){
            forceSubmitForm = true;
            $('#purchaser_contact').submit();
        }, 1500); // Submit after 1,5 seconds

        return false; // Do not submit immediately
    });
});

Answer 4

Here's is jQuery example (not tested):

$(function() {
    $("#myForm").submit(function() {
        $.post(/* make AJAX request */ function() {
            if (/* similar entry does not exisits */) {
                 $("#myForm").data("allow-submit", true).submit();
            } else {
                 alert('NOT ALLOWED!');
            }
        });

        return $(this).data("allow-submit") || false; // prevent form submit if not allowed
    });
});

Answer 5

Essentially, you want to run a function when the form is submitted and then short circuit the form action if your function is negative. Something like this should do:

$("form#myForm").submit(function(){
    if(someCustomFunction()){//do the check
            event.preventDefault; //short circuit
            someOtherCustomFunction();//display your alternative

    }
});