CODEWITHSUNDEEP
javascriptjquery
Dr.Neo
Dr.Neo

Reputation: 1280

Serialize checkboxs within Ajax call using jQuery

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

Upvotes: 0

Views: 137

Answers (2)

Eswara Reddy
Eswara Reddy

Reputation: 1647

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

Upvotes: 0

garyrgilbert
garyrgilbert

Reputation: 487

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.

Upvotes: 1

Related Questions