背景
使用 zepto 的 serialize 方法生成字符串用以表单提交时,发现该方法会跳过未选中的 checkbox
原因:
disabled 的表单元素,button,未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。
解决方法:
- 后期添加
使用 serialize 方法后,检查 checkbox 是还被选中,若没有,则手动添加checkbox 的name=false到字符串上 - 服务端设默认值
当没上传这个name字段时,让服务端将这个字段的值默认为 false - 添加隐藏标签
添加一个隐藏的input[type=text],当checkbox 的change事件触发时,改写input的值 - 自定义 serialize
改写新的 serialize 方法,使其符合开发者特定的需求
相关代码
1. 添加隐藏标签
<form action="">
<input type="checkbox" id="like">
<input type="text" id="_like" name="like" hidden>
</form>
<script>
$('#like').on('change', function (e) {
$('#_like').val(e.target.checked);
});
</script>
2. 自定义 serialize
<form action="">
<input type="checkbox" name="like">
</form>
<script>
var serializeArray = function(elms) {
var name, type, result = [],
add = function(value) {
if (value.forEach) return value.forEach(add);
result.push({
name: name,
value: value
});
};
if (elms[0]) $.each(elms[0].elements, function(_, field) {
type = field.type, name = field.name;
if (name && field.nodeName.toLowerCase() != 'fieldset' &&
!field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' && type != 'checkbox' && (type != 'radio' || field.checked)) {
add($(field).val());
} else if (type == 'checkbox') {
add(field.checked);
}
});
return result;
};
var serialize = function(elms) {
var result = [];
serializeArray(elms).forEach(function(elm) {
result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value));
});
return result.join('&');
};
</script>