Question

I have a form for a mailing list script which I am trying to get working with ajax so the form can refresh without reloading. With the $.ajax part of the jquery commented out, the form variables are sent to the URL string.

?email=test%40address.com&sub=sub&submit=Submit+Form

My question is why is the submit=Submit+Form part there given that it isn’t part of my “datastring” and will that be a problem when it comes to processing the actual PHP script?

Here is the form :

<form name="email_list" action="">

<p><strong>Your Email Address:</strong><br/>
<input type="text" name="email" id="email" size="40">
<input type="hidden" name="sub" id="sub" value="sub">

<p><input type="submit" name="submit" value="Submit Form" class="email_submit"></p>
</form>

and the JQuery

$(function() {    
$('.email_submit').submit(function() { 

var email = $("input#email").val();  
            if (name == "") { 
            $("input#email").focus();  
            return false;
        }  
var sub = $("input#sub").val();  
            if (name == "") {  
            $("input#sub").focus();  
            return false;
        }       

var dataString = '&email=' + email + '&sub=' + sub;

//alert (dataString);return false;  
/*$.ajax({  
    type: "POST",  
    url: "mailing_list_add2.php",  
    data: dataString,  
    success: function() {  
        $('#display_block')                      
        .hide()  
        .fadeIn(2500, function() {  
            $('#display_block');  
        }); 
    }  
}); 
return false; 
});*/

}); 

Answer 1

You should put the submit handler on the form, not on the button, even if is a submit button.

<form name="email_list" action="" id="my_form">

Update the javascript

$(function() {    
  $('#my_form').submit(function() { 
    ...
  });
});

To serialize all the inputs into a string you could use $("#my_form").serialize() which builds a string with all the inputs and their data ready for posting:

var dataString = $("#my_form").serialize();

Also note that having a name attribute defined for the submit input means that its value will be sent also in the form. If you don’t need that, you can simply remove the name attribute.