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);
?>

can you please add an error: method and see if the request is sent. And also add a console.log($("#generateCompression").serialize()) in beforeSend — Spokey
– Spokey, Commented Jul 29, 2013 at 8:11
@Spokey names%5B%5D=Jan-2011&names%5B%5D=Jan-2012&names%5B%5D=Jan-2013 — Dr.Neo
– Dr.Neo, Commented Jul 29, 2013 at 8:15
try using $("#generateCompression").serializeArray(); for the data key — harikrish
– harikrish, Commented Jul 29, 2013 at 8:16
i thinks its empty if no checkbox is selected. the code works fine — kashimu
– kashimu, Commented Jul 29, 2013 at 8:19

garyrgilbert · Accepted Answer · 2013-07-29 08:48:48Z

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.

answered Jul 29, 2013 at 8:48

garyrgilbert

4875 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eswara Reddy · Accepted Answer · 2013-07-29 09:09:41Z

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"));

Collectives™ on Stack Overflow

Serialize checkboxs within Ajax call using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related