Question

I found, on this site a way to submit a POST form without leaving the page. In that script, they put instructions on how to have a function take place after the form’s been submitted. Here’s what the script looked like:

$(document).ready(function(){
$form = $('form');
$form.submit(function(){
  $.post($(this).attr('action'), $(this).serialize(), function(response){
  },'json');
  return false;
});
});​

They said, between function(response){ and },'json'); you can specify other JavaScript to take place like alerts etc. after the form’s been submitted. I tried

$(document).ready(function(){
$form = $('form');
$form.submit(function(){
  $.post($(this).attr('action'), $(this).serialize(), function(response){
$('form').hide();
  },'json');
  return false;
});
});

Unfortunately, that does not work, can anybody tell me why? I’ve set up a jsFiddle. Please help. Thanks.

Answer 1

Using $.post, the “function(response)” is only called AFTER a successful result, so you have been misinformed about doing work within this function while the server is processing the request.

To continue processing after sending the request to the server, place the $(‘form’).hide() after the $.post call:

$form.submit(function(){
  $.post(
    $(this).attr('action'), $(this).serialize(), 
    function(response){
    }
    ,'json'
  );
  $('form').hide();
  return false;
});