Jquery POST, submitting a form while posting the data

Question

I used a tutorial to build my send button. I have two forms and depending on which one is selected, a different form needs to be submitted on "send" however this script does nothing but mess up my mailer. Can someone help me figure this out and explain to me what is going on? The form looks exactly how you think it would however i took out the form's method and action attributes because i figured they would be handled in the below script.

  "Send": (function() { 

            if(submitbutton == 1){
                var dataString = 'name:'+ name + '</br>email:' + email + '</br>phone:' + phone;  
                //alert (dataString);return false;  
                $.ajax({  
                     var name = $("input#name").val();  
                     var phone = $("input#phone").val();  
                     var email = $("input#email").val();  
                  type: "POST",  
                  url: "mailer.php",  
                  data: dataString,  
                  success: function() {  
                    $( this ).dialog( "close" );
                  }  
                });  
                return false;  

            }

            else if(submitbutton == 2){
                var dataString = 'name:'+ name + '</br>email:' + email + '</br>phone:' + phone;  
                //alert (dataString);return false;  
                $.ajax({  
                     var name = $("input#name2").val();  
                     var phone = $("input#phone2").val();  
                     var email = $("input#email2").val();  
                  type: "POST",  
                  url: "mailer2.php",  
                  data: dataString,  
                  success: function() {  
                    $( this ).dialog( "close" );
                  }  
                });
                return false;  
            }
            else if(submitbutton == 0){ 
                $("#error").css("display", "");
            }

        }),

Answer 1

One notable problem in the javascript is you are defining dataString prior to defining the variables it contains like email.

ALso the dataString is not valid form encoding. It should look like 'email=foo@foo.com&name=foo' once it is compiled. It can't have html in it

It is simpler passing an object to data of $.ajax and let jQuery compile it for you or use $('#formId').serialize() to gather all the data in a whole form

Try this instead:

var data = {
    name: $("input#name").val(),
    email: $("input#email").val(),
    phone: $("input#phone").val()
}
var $dialog=$(this)
$.ajax({
    type: "POST",
    url: "mailer.php",
    data: data,
    success: function () {
        $dialog.dialog("close");
    }
});