如何基于Ajax请求的结果提交（或不提交）表单？

Question

I have a form on my site where users submit stuff and get results

<form accept-charset="UTF-8" action="/submit-stuff" data-remote="true" method="post">
<!-- various form fields -->
<input type="submit" value="Run Code" id="submit-button">
</form>

Before submitting their info to the backend, I try to get the results in Javascript. If I can get the results, I return false in Javascript to prevent the form submission.

$('#submit-button').click(function() {
   if(canGetResults()){
     //deal with submission and then
     return false;
   }
   //the button will work as usual if canGetResults is false or there's an error 
});

This works fine, but now I want to try to get the results through another ajax request and only submit to my regular backend if that fails. I call the following code after the button is clicked:

$.post("http://example.com/submit-stuff", json, function(data) {
  //do stuff with data
});

However, it's asynchronous (so I can't return results from it) so the code reaches return false even when the other ajax attempt fails. How should I fix this so it only submits to my own backend when the ajax attempt failed?

I could change the $.post to $.ajax and make it synchronous, but that's not usually recommended. Alternatively, I can submit the form within the $.post callback, but how should I submit the whole form from there? And would it still submit if there's an error or http://example.com/submit-stuff doesn't work?

Answer 1

Your submit handler should always prevent the form from submitting.

Then, if the Ajax code comes back with an OK, you should call the form's submit() method. This will bypass the submit handler and submit the form.

NB: Call submit on the DOM object, not the jQuery object. jQuery has a habit of triggering event handlers from its wrappers.

Answer 2

You can bind the ajax request all in your submit function, and call a .post() event if necessary:

 $("form").submit(function(e){
     e.preventDefault(); // <-prevents normal submit behaviour

     //only post if your ajax request goes your way
     $.ajax(url,function(data){
       //argument to post or not
       if(data=="success"){ postForm(); }          
     }); 

 });

function postForm(){
    $.post(
      "/submit-stuff"
      ,$( "form" ).serialize()
      ,function(data){
         //your code after the post
      }); 
}

If you do not want to create a separate function for your postForm, then you can just put it inside the wrapper where it's currently being called.