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=

就在此刻。这纯粹是为了有一个更清晰，更有意义的网址链接到人们的书签等等。所以，我需要的是沿着这些方面的东西，但这是不对的，因为我不是在编辑实际的表格但是一个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

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

Answer 3

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

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

Answer 4

你可以做的一件事就是在调用“serializeArray”之前禁用空输入

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

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

Answer 5

也许有些提议的解决方案在提出问题的那一刻起作用（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'));
        }
    });
}

但是，我认为这不是一个很常见的情况，因为我们提交表格，因此假设没有必要恢复缺少的名字。

Answer 6

你的问题帮助我找出了我的情况，这有点不同 - 所以也许其他人可以从中受益。我不需要直接提交表单，而是需要阻止将空表单元素收集到序列化数组中，该数组通过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 7

或序列化，用正则表达式清除空键=值对并调用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;
});

Answer 8

我一直建议的另一种方法是在服务器端执行此操作，因此您可以：

正确验证输入数据
设置默认值
根据需要更改输入值
拥有干净的网址或友情网址，例如“/ quizzes / english / level-1 /”

否则你将不得不处理文字输入，选择，收音机等......

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

8 个答案: