我有一个页面，上面有一组表单，用于 API 测试。由于不值得解释的原因，我通常不想在提交给服务器的文件中包含空字段。如何在提交前从数据中删除空字段？
例如，如果我有一个包含两个字段 foo 和 bar 的表单，并且用户将 bar 留空，我希望服务器看到提交时就好像唯一的字段是 foo。
我的第一次尝试涉及使用 jquery 循环遍历字段
$("form").submit(function() {
$(this).children(':input').each(...)
}
并删除该字段。但是 a) 不起作用，并且 b) 似乎它会从页面上的可见表单中删除该字段，这不是我想要的。
另一种方法可能是遍历字段并使用具有“”以外的值的字段手动构造提交字符串。那会奏效吗？有更好的想法吗？
【问题讨论】：
标签： jquery form-submit
一种方法是在这些字段上设置“禁用”属性，以防止它们的值被序列化并发送到服务器：
$(function()
{
$("form").submit(function()
{
$(this).children(':input[value=""]').attr("disabled", "disabled");
return true; // ensure form still submits
});
});
如果您有客户端验证，您还需要在验证失败时重新启用这些字段：
$(':input').removeAttr("disabled");
编辑：修复错误
【讨论】：
$(this).children(':input[value=""]').prop('disabled', true);
结合这里的答案，与this question regarding finding empty input 我得出了这个解决方案。
$(function() {
$("form").submit(function() {
$(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
return true; // ensure form still submits
});
});
所以从@Luke 的解决方案开始，添加他使用 find 而不是 children 的建议（我的表单在表格中），然后使用 @gdoron 的过滤技术来隔离空元素。
【讨论】：
我通常会同意@Luke，但是下面的解决方案应该处理任何空值，无论它是否是输入标签，只要记住在所有表单子元素上添加一个 name 属性，如果你想要它们进行序列化；
HTML：
<form action="yourUrl.php" name="myForm" id="myForm">
input1: <input type="text" name="field1" /><br /><br />
input2: <input type="text" name="field2" /><br /><br />
input3: <input type="text" name="field3" /><br /><br />
input4: <input type="text" name="field4" /><br /><br />
select: <select name="selectField">
<option value="">empty value</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select><br /><br />
<input type="submit" name="submit" value="submit" />
</form>
jQuery：
$("#myForm").submit (function (e) {
e.preventDefault();
var _form = $(this);
var data = {};
var formData = _form.serializeArray();
$.each(formData, function (index, value) {
var data_name = formData[index].name;
var data_value = formData[index].value;
if (data_value !== "") {
data[data_name] = data_value;
}
});
// now with ajax you can send the sanitize data object
$.post(_form.attr("action"), data, function(res, textStatus, jqXHR) {
// do something
});
});
【讨论】：
投票最多的答案对我不起作用。我认为选择器不够具体。这对我有用：
$(function() {
$("#myForm").submit(function() {
$("#myForm *").filter(":input").each(function(){
if ($(this).val() == '')
$(this).prop("disabled", true);
});
return true; // ensure form still submits
});
});【讨论】：
$(function() {
$('form').submit(function () {
var $empty_fields = $(this).find(':input').filter(function () {
return $(this).val() === '';
});
$empty_fields.prop('disabled', true);
return true;
});
});
结合多种特征和主观风格，尤其是：
【讨论】：
也许不是最好的解决方案，但这应该是实现您所追求的快速简便的方法
$("form").submit(function() {
$(this).children('input[value=""]').each(function(){
// Rename the name attribute to something else if the value is "" to it isn't submitted
$(this).attr('blank', $(this).attr('name'));
$(this).removeAttr('name');
});
}
那么如果你使用vlient端验证或者通过ajax发帖，那么你需要重新设置name属性，这样下一次提交才能正常工作...
$(this).attr('name', $(this).attr('blank'));
$(this).removeAttr('blank');
【讨论】：
添加到卢克丹尼斯接受的答案。如果有人使用 Python/Django 框架，如果您使用 django-filters 应用程序，此脚本可能会有所帮助。在这个例子中，我有多个过滤器，它们有一个输入和选择器 html 元素。但是，该脚本也适用于单输入过滤器以及多项选择过滤器。
$(function()
{
var form = $( 'form' )[0];
$( form ).submit(function()
{
$('input, select').each(function()
{
if ($(this).val().length === 0)
{
$(this).prop('disabled', true);
$(this).next().prop('disabled', true);
}
});
});
});
【讨论】：