jquery serialize and $.post

Asked 2009-05-28T11:03:23.490

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;

Edit Report

3 Answers

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>

                        
                        
                            answered 2009-10-16T05:21:15.570


            
            
                
                    
                        
                            
                            
                        
                        7
                        
                            
                            
                        
                        
                    
                    
                        
                        try using serializeArray() instead of serialize(). serialize() will produce an url-encoded query string, whereas serializeArray() produces a JSON data structure.

                        
                        
                            answered 2009-05-28T11:36:48.337
                            
                        
                        
                            
                                
                                
                            
                        
                        
                            
                            
                            
                                
                                
                            
                            
                        
                    
                
            
            
            
                
                    
                        
                            
                            
                        
                        0
                        
                            
                            
                        
                        
                    
                    
                        
                        On the php side, you may want to look into parse_str. It will parse that url string into variables, or into an array if you utilize the 2nd optional parameter.

                        
                        
                            answered 2009-10-06T14:40:07.127



        
        
            Your Answer