Adding a "Mail Sending..." notification during AJAX request - php

Question

In my mail sending script powering my contact form, the mail sending action can take some time, during this time the user doesn't know what happens. So, I wanted to add a "Mail Sending..." notification. The "Mail Sending..." notification appears when the submit button is clicked, but the script processing stalls at this point infinitely, and further mail processing is not done. I shall appreciate clues on how to resolve this. Find below the AJAX script and html form code.
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("send.php", $("#contactform").serialize(),function(response) {
$('#success').html('<h4>Mail Sending...</h4>').load(url);
});
return false;
});
});
</script>
And this is the contact form html code:
<form action="" method="post" id="contactform" >
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message"></textarea><br />
<input type="button" value="send" id="submit" />
<div id="success" style="color:red;"></div>
</form>

Answer 1

Well,
"during this time the user doesn't know what happens. So, I wanted to add a "Mail Sending..." notification."
How about ajaxStart as this is exactly what it is designed for.
"Show a loading message whenever an Ajax request starts (and none is already active)."
You can simply attach the event handler to any element:
$( document ).ajaxStart(function() {
$( "#loading" ).show();
});
Then in the case when the ajax request is started the loading div will be shown. Once the ajax is done it will be hidden again as it would with:
$( "#loading" ).hide();
You will want to make sure that the div with that id (loading) is hidden by default.
"but the script processing stalls at this point infinitely, and further mail processing is not done."
Per jQUery Post:
If a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.post() is also available for error handling.
If your post is failing it should return an indication as to why.
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post( "test.php", $( "#testform" ).serialize() )
.done(function( data ) {
$('#success').html('<h4>Mail Sending...</h4>');
// You should not do a .load within another ajax call so placing it here is okay as it will execute AFTER the original one completes, but it will trigger the ajaxStart method again.
})
.fail(function ( data ) {
console.log(data);
});
});
});
</script>
Unfortunately I am on mobile so I can't test the above to make sure it works, but that should get you started.