Serialize checkboxs within Ajax call using jQuery

Question

i need to serialize form input to send an Ajax call using jQuery to php script and each time i tried to print out the values of the form it gives empty array . HTML Form

<form class="form-horizontal" id="generateCompression" method="post">
 <fieldset>
 <div class="control-group"><label class="control-label">Checkboxes</label>
 <div class="controls">
 <input type="checkbox" name="names[]" value="Jan-2011"> Jan-2013</label>
 <input type="checkbox" name="names[]" value="Jan-2012"> Jan-2013</label>
 <input type="checkbox" name="names[]" value="Jan-2013"> Jan-2013</label>
 </div>
 </div>
 <div class="form-actions">
 <button type="submit" class="btn btn-primary">Generate</button>
 <button type="reset" class="btn">Cancel</button>
 </div>
 </fieldset>
</form>

Javascript

$(document).ready(function(){
 $("#result").hide(); 
 $("#generateCompression").submit(function(){
 $.ajax({
 url: "compare-action.php",
 type: "POST",
 data: $("#generateCompression").serialize(),
 async: true,
 beforeSend : function (){ 
 $("#loading").show();
 $("#reportFilecreate").fadeOut();
 },
 success: function(response) {
 $("#loading").hide(); 
 $("#error").show();
 $("#error").html(response);
 } 
 });
 return false;
 }); 
});

this is the PHP file

<?php
$inputs = $_POST;
print_r($inputs);
?>

• Spokey: can you please add an error: method and see if the request is sent. And also add a console.log($("#generateCompression").serialize()) in beforeSend
• Dr.Neo: @Spokey names%5B%5D=Jan-2011&names%5B%5D=Jan-2012&names%5B%5D=Jan-2013
• harikrish: try using $("#generateCompression").serializeArray(); for the data key
• krizna: $inputs = $_POST[names]
• kashimu: i thinks its empty if no checkbox is selected. the code works fine

Answer 1

Checkboxes do not send anything to the server if at least one checkbox is not checked.

Your script needs to check for the existence of your form field, if the formfield doesnt exist then you know nothing has been checked.

To test simply add a text box to your form and then run your script again.

Answer 2

Try this. Send serialized data in one variable like

$.ajax({
 url: "compare-action.php",
 type: "POST",
 traditional: true,
 data: {
 "test_data" : $("#generateCompression").serialize()
 },
 async: true,
 beforeSend : function (){ 
 $("#loading").show();
 $("#reportFilecreate").fadeOut();
 },
 success: function(response) {
 $("#loading").hide(); 
 $("#error").show();
 $("#error").html(response);
 } 
 });

And in the compare-action.php file

print_r($_POST("test_data"));