jquery serialize and $.post

Question

I'm trying to send a lot of data from a form using the $.post method in jQuery. I've used the serialize() function first to make all the form data into one long string which I will then explode serverside. The weird thing is when I try and send it using $.post it appends the result of the serialize() to the URL as if I was sending it using GET. Anyone have any ideas why this is happening?

Here's the jquery:

$("#addShowFormSubmit").click(function(){   var perfTimes = $("#addShowForm").serialize();   $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {     $("#addShowSuccess").empty().slideDown("slow").append(data);   }); });   

here's the php:

$show = $_POST['name']; $results = $_POST['results']; $perfs = explode("&", $results); foreach($perfs as $perf) {     $perf_key_values = explode("=", $perf);     $key = urldecode($perf_key_values[0]);     $values = urldecode($perf_key_values[1]); } echo $key, $values;   

Answer 1

If you are using a <button> element to activate the serialize and ajax, and if that <button> element is within the form element, the button automatically acts as a form submission, no matter what other .click assignment you give it with jQuery.

type='submit'

<button></button> and <button type='submit'></button> are the same thing. They will submit a form if placed within the <form> element.

type='button'

<button type='button'></button> is different. It is just a normal button and will not submit the form (unless you purposely make it submit the form via JavaScript).

And in the case where a form element has no action attribute specified, this submission simply sends the data back onto the same page. So you will end up seeing a page refresh, along with the serialized data appearing in the URL as if you used GET in your ajax.

Possible solutions

1 - Make the <button> type button. As explained above, this will prevent the button from submitting the form.

Before:

<form id='myForm'>     <!--Some inputs, selects, textareas, etc here-->     <button id='mySubmitButton'>Submit</button> </form> 

After:

<form id='myForm'>     <!--Some inputs, selects, textareas, etc here--> <button type='button' id='mySubmitButton'>Submit</button> </form> 

2 - Move the <button> element outside the <form> element. This will prevent the button from submitting the form.

Before:

<form id='myForm'>     <!--Some inputs, selects, textareas, etc here-->     <button id='mySubmitButton'>Submit</button> </form> 

After:

<form id='myForm'>     <!--Some inputs, selects, textareas, etc here--> </form> <button id='mySubmitButton'>Submit</button> 

3 - Add in the preventDefault() into the button click handler to prevent the form from being submitted (it's default action):

$("#addShowFormSubmit").click(function(event){   event.preventDefault();   var perfTimes = $("#addShowForm").serialize();   $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes },      function(data) {     $("#addShowSuccess").empty().slideDown("slow").append(data);   }); }); 

Obviously without seeing all your code, I have no idea if this is the case for your issue, but the only reason I have ever seen behavior you are describing is because the submit button was a <button> without a type specified.