Form not submitting with AJAX

Question

=====UPDATE AGAIN==== (if anyone cares!) the solution I posted before stopped working for whatever reason. I included a beforeSend in my ajax request and pasted the portion

Answer 1

Change done to success:

success:  function(data){

success only fires after your request got response and the response code is OK(http 200).

Answer 2

"client_config_send2.php" is a filename. The URL you give to Ajax needs to be, well, a URL like http://example.com/client_config_send2.php.

Answer 3

Here is the final code that does exactly what I want: - the validateForm() function works as it should. If the form is not complete, it returns false, an alert pops up and the form does not submit - if validateForm() returns true, the form gets submitted, the confirmation alert pops up and the page does NOT refresh. Users can then build a new configuration and submit a new request without re-entering all the contact info.

The 2 .preventDefault did the trick!

$('form').on('submit', function(e) {
e.preventDefault(); //prevents page refresh when form is submitted
//If form could not be validated
var x = validateForm();
if(x == false){
   //prevent the form form submitting
    e.preventDefault();  
}
//else 
else {
    //form input is valid
    //make the ajax call
    $.ajax({
        type: "post",
        url: "client_config_send2.php",
        data: $(this).serialize(),
        success:  function(data){
            alert('Thank you! we will get back to you within 24 hours. Please check your junk / spam folder if you do not receive a response within that time.');
        }
       });
   }
});

Thanks everyone for your help!

Answer 4

Could you try removing/commenting event.preventDefault();

If this method is called, the default action of the event will not be triggered. (http://api.jquery.com/event.preventdefault/)

Answer 5

Try coding in the following format. The logic uses an if/else statement to make the ajax call.

$('form').on('submit', function(e) {
    //If form could not be validated
    if(!validateForm(this)){
       //prevent the form form submitting
        alert("Your form is not valid for submission!");
        e.preventDefault();  
    }
    //else 
    else{
        //form input is valid
        //make the ajax call
        $.ajax({
            type: "post",
            url: "client_config_send2.php",
            data: $(this).serialize(),
            done:  function(data){
                alert("Thank you, we will get back to you shortly");
            }
           });
       }
    });
 });

Answer 6

Update the code below:

$('form').on('submit', function(e) {
e.preventDefault();     
if(!validateForm(this)){
return true;
}
var formdata = $(this).serialize();

$.ajax({
        type: "post",
        url: "http://www.example.com/client_config_send2.php",
        data: formdata,
        success:  function(data){
            alert("Thank you, we will get back to you shortly");
}
        });

})  


</script>