CODEWITHSUNDEEP
javascriptphpjqueryajaxcheckbox
user1881482
user1881482

Reputation: 746

Pass array of checkboxes with ajax along with other inputs

Currently I have been using ajax to post to a few methods in my code igniter installation. I now have a form that has a checkbox array with other inputs and am having problems passing the value into post. Currently it returns the last value of the the last checkbox even if it's not checked.

.js

$('.flagPost').on('submit', function() {
var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {};

that.find('[name]').each(function(index, value) {
    var that = $(this), name = that.attr('name'), value = that.val();

    data[name] = value;
});
$.ajax({
    url : url,
    type : type,
    data : data,
    success : function(response) {
        $('#flagSuccess').empty().append(response).fadeIn('slow').delay(3000).fadeOut(800);
    }
});
return false;
});

.html

 <div class="form-group">
                        <label for="email" class="col-sm-4 control-label">Email</label>
                        <div class="col-sm-8">
                            <input type="email" class="form-control input-sm" name="email" id="email" placeholder="Email Address" value="<?php echo set_value('email');?>">
                        </div>
                        <span class="help-block"></span>
                    </div>
                    <div class="form-group">
                          <label class="control-label col-sm-4">Issues/Problems</label>
                          <div class="col-sm-8">
                            <label class="checkbox" for="problems-0">
                              <input type="checkbox" name="problem[]" id="problems-0" value="Adult Content">
                              Adult Content
                            </label>
                            <label class="checkbox" for="problems-1">
                              <input type="checkbox" name="problem[]" id="problems-1" value="Spam">
                              Spam
                            </label>
                            <label class="checkbox" for="problems-2">
                              <input type="checkbox" name="problem[]" id="problems-2" value="Non-existent">
                              Non-existent
                            </label>
                            <label class="checkbox" for="problems-3">
                              <input type="checkbox" name="problem[]" id="problems-3" value="Language">
                              Language
                            </label>
                            <label class="checkbox" for="problems-4">
                              <input type="checkbox" name="problem[]" id="problems-4" value="Other">
                              Other
                            </label>
                          </div>
                          <span class="help-block"></span>
                        </div>
                        <!-- Textarea -->

Upvotes: 0

Views: 702

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Since the checkboxes have the same value for the name attribute they are overwriting the same property on the data object.

that.find('[name]').each(function(index, value) {
    var that = $(this), name = that.attr('name'), value = that.val();
    data[name] = value; //This overwrites the property
});

Look at using jQuery's serialize function instead of building your own object to pass.

JS fiddle: http://jsfiddle.net/7Aysb/

Upvotes: 1

Quentin
Quentin

Reputation: 943207

jQuery has a serialize method for grabbing all the data from a form (following the normal rules for what controls count as successful)

data = that.serialize()

Upvotes: 2

Related Questions