I have looked at quite a few posts on the issue and there seem to be several ways of doing this which is causing me confusion. The validation errors are popping up properly but the form is sent without entry in the form fields.

I have tried a few different solutions from other posts but I can't seem to get this to work out. I am sure it is something painfully apparent. Any help is greatly appreciated.

You can see what is happening Here

      $(document).ready(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var phone1 = $("#phone1").val();
        var phone2 = $("#phone2").val();
        var phone3 = $("#phone3").val();
        var association_name = $("#association_name").val();
        var association_city_state = $("#association_city_state").val();

        var dataString = 'name='+ name + '&email=' + email + '&phone1=' + phone1 + '&phone2=' + phone2 + '&phone3=' + phone3 + '&association_name=' + association_name + '&association_city_state=' + association_city_state;

        //to send the ajax request  
          type: "POST",
          url: "send/sendEmail.php",
          data: dataString,
          success: function() {
            $(".form_main").slideUp("slow", function() {                   

            $(".form_main").before('<div style="width: 300px; margin-left: auto; margin-right:   auto;"><br/><br/><br/><h1>Success</h1><p>All good.</p></div>');                                         



    }); // ready

I could be wrong, but unlsess the input fields have data in them before the document loads, then its just going to get the blank values when the document loads. Try putting all that in a function, so when you click submit, it will get the data from the input fields and then submit them.

Hi fobos and thanks for the reply...

My Javascript skills are real limited here so I am not so sure how to do that... Any chance you could provide a quick example for me? Would be greatly appreciated...

Have you tried alerting the dataString to see if the values are being passed?

var dataString = 'name='+ name + '&email=' + email + '&phone1=' + phone1 + '&phone2=' + phone2 + '&phone3=' + phone3 + '&association_name=' + association_name + '&association_city_state=' + association_city_state;
return false;

if it is working, then its the php coding. Try looking at Click Here to learn ajax. The php code should still be the same with the input from the variable, but since you want to pass the the variables in a url, make sure you use the $_GET to get the variables.