提交之前从表单的参数中删除空值

Question

我有一些JavaScript获取表单的变化，然后调用表单的常规提交功能。该表单是一个GET表单（用于搜索），并且我在params中有很多空的属性。我想要做的是在提交前删除任何空属性，以获得更清洁的URL：例如，如果有人改变了“主题”选择“英语”我想他们的搜索网址是

http://localhost:3000/quizzes?subject=English 

而不是

http://localhost:3000/quizzes?term=&subject=English&topic=&age_group_id=&difficulty_id=&made_by=&order=&style= 

就像现在这样。这纯粹是为了让一个更干净和更有意义的URL链接到人们的书签等目的。所以，我需要的是沿着这些线的东西，但这是不正确的，因为我没有编辑实际的形式但是从形式的PARAMS做出了JS对象：

quizSearchForm = jQuery("#searchForm"); 
    formParams = quizSearchForm.serializeArray(); 
    //remove any empty fields from the form params before submitting, for a cleaner url 
    //this won't work as we're not changing the form, just an object made from it. 
    for (i in formParams) { 
    if (formParams[i] === null || formParams[i] === "") { 
     delete formParams[i]; 
    } 
    } 
    //submit the form 

我想我接近这一点，但我缺少的是如何编辑实际窗体的属性，而不是使另一个对象和编辑的步骤。

感谢您的任何意见 - 最大

编辑 - 解决 - 感谢很多人谁张贴这一点。这是我的，这似乎完美。

function submitSearchForm(){ 
    quizSearchForm = jQuery("#searchForm"); 
    //disable empty fields so they don't clutter up the url 
    quizSearchForm.find(':input[value=""]').attr('disabled', true); 
    quizSearchForm.submit(); 
} 

Answer 1

属性disabled设置为true的输入不会与表单一起提交。因此，在一个jQuery的行：

$(':input[value=""]').attr('disabled', true); 

Answer 2

如果您调用表单的submit方法，则不能这么做;那会提交整个表单，而不是你为jQuery创建的数组。

你可以做的是在提交表单前禁用空的表单域;表单提交时省略了禁用的字段。因此，请浏览表单的元素，并为每一个空的元素禁用它，然后在表单上调用submit方法。 （如果它的目标是另一个窗口，那么你会想要返回并重新启用这些字段，如果它的目标是当前窗口，则无关紧要，页面将被替换。）

Answer 3

那么有一件事你能做的只是前禁用空输入叫“serializeArray”

$('#searchForm').find('input, textarea, select').each(function(_, inp) { 
    if ($(inp).val() === '' || $(inp).val() === null) 
    inp.disabled = true; 
    } 
}); 

的“serializeArray（）”例程将不包括那些在它的结果。现在，如果表单帖子不会导致完全刷新的页面，您可能需要返回并重新启用这些表单。

Answer 4

$('form#searchForm').submit(function() { 
    $(':input', this).each(function() { 
     this.disabled = !($(this).val()); 
    }); 
}); 

Answer 5

您的问题，帮我找出我的情况，这是一个有点不同 - 所以也许别人可以从中受益。我不需要直接提交表单，而需要阻止将空表单元素收集到一个序列化数组中，这些数组是，然后通过AJAX发布。

就我而言，我只是通过表单元素所需循环，并禁止一切都是空的，然后收集剩菜到一个数组，像这样：

// Loop through empty fields and disable them to prevent inclusion in array 
$('#OptionB input, select').each(function(){ 
    if($(this).val()==''){ 
     $(this).attr('disabled', true); 
    } 
}); 

// Collect active fields into array to submit 
var updateData = $('#OptionB input, select').serializeArray(); 

Answer 6

另一种方法我总是建议是做即在服务器端，让您可以：

1. 验证输入的数据正确
2. 设置默认值
3. 更改输入值如果n eeded
4. 有一个干净的URL或友好的URL，如“/测验/英语/水平-1 /”

否则，你将不得不处理文本输入，选择，电台等..

Answer 7

也许一些建议的解决方案在提出问题的那一刻起作用（2010年3月），但今天，2014年8月，禁用空输入的解决方案无法正常工作。我的谷歌浏览器中也会显示禁用的字段。但是，我试图删除“名称”属性，它工作正常！

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

更新： 好，可能是因为禁用字段不工作对我来说是不是太过分了自2010年以来改变，但仍然没有在我的谷歌浏览器工作原因。我不知道，也许只是在Linux版本。无论如何，我认为删除名称attr会更好，因为尽管策略使浏览器关于禁用字段，但如果缺少名称attr，则无法发送参数。另一个优点是，通常禁用字段意味着一些样式的变化，并且在表单最后被引用之前不会很好地在窗体中看到样式更改。 还有一个缺点，就像Max Williams在评论中提到的一样，因为删除名称attr解决方案不可切换。下面是避免这种问题的方法：

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).data('name', $(this).attr('name')); 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

function recoverNames(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if ($(this).data('name')){ 
      $(this).attr('name', $(this).data('name')); 
     } 
    }); 
} 

不过，我认为这不是一个很常见的情况，因为我们提交表单，因此假定有没有必要恢复丢失的名称ATTRS。

Answer 8

或者序列化，清空键=与正则表达式的值对，并拨打了window.location：

$("#form").submit(function(e){ 
    e.preventDefault(); 
    //convert form to query string, i.e. a=1&b=&c=, then cleanup with regex 
    var q = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi,""), 
    url = this.getAttribute('action')+ (q.length > 0 ? "?"+q : ""); 
    window.location.href = url; 
});