通过ajax传递复选框数组以及其他输入


Pass array of checkboxes with ajax along with other inputs

目前我一直在使用ajax发布到我的代码点火器安装的几个方法。我现在有一个具有其他输入的复选框数组的表单,并且有问题将值传递到post。目前它返回最后一个复选框的最后一个值,即使它没有被选中。

. 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 -->

jQuery有一个serialize方法,用于从表单中抓取所有数据(遵循常规规则,哪些控件算作成功)

data = that.serialize()

由于复选框具有相同的name属性值,因此它们覆盖了data对象上的相同属性。

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

看看使用jQuery的序列化函数,而不是自己构建对象来传递。

JS小提琴: http://jsfiddle.net/7Aysb/