AJAX 表单复选框数组值“卡住”挂起答案

【问题标题】：AJAX form checkbox array value gets "stuck" hangingAJAX 表单复选框数组值“卡住”挂起
【发布时间】：2014-07-07 15:30:50
【问题描述】：

让它变得非常简短。

我有一个带有 method="GET" 的 AJAX 表单，因为我想反映 URL 中的所有更改（并且以后可以访问它）。当任何一个表单元素发生更改时，表单会自动提交到服务器。在服务器上，我使用“history pushState”重写了 URL。

如果重要的话，我正在使用 Ruby-on-Rails 作为服务器端技术。

其中一个元素复选框数组（可以选择多个元素） - 它是用户希望看到的参数列表。

现在回到问题本身——假设我们是第一次访问这个页面。到目前为止，没有一个复选框被选中。然后我们检查，例如，第一个复选框。事件被触发 - 表单被提交 -> url 被正确重写。然后我取消选中此复选框 -> 触发事件 -> 提交表单 -> 再次正确重写 url！

到目前为止一切都是正确的。

现在这种情况不起作用。我选中此复选框-> 表单已提交-> url 重写。正确的。之后我点击“刷新”（F5 或 Ctrl-R）。我看到复选框被选中（应该是），但是......我试图取消选中这个复选框，但是由于服务器端的一些奇怪的原因，我仍然看到这个数组值到达服务器。当然，它也反映在 URL 中 - 它存在于那里（虽然它不应该存在）。

对不起，混乱的解释。

我做错了什么？

P.S Form 可以正常使用普通参数（主要是字段）。

P.P.S 我真的很好奇 - 那里发生了什么，我什至尝试通过执行以下代码在表单值提交到服务器之前查看它们：

$("#my-form").on("ajax:beforeSend", function(){
    console.log("FORM BEFORE SUBMISSION: " + $(this).serialize());
});

那里没有复选框。哪个是正确的！

提前致谢！

P.P.P.S 这就是我的想法的总体实现方式（非常简短）：

<form method="GET" action="/search/?" id="my-form" data-remote="true">
... (some form elements here as well)
<input type="checkbox" name="search[types][]" value="1">
<input type="checkbox" name="search[types][]" value="2">
<input type="checkbox" name="search[types][]" value="3">
... (and submit button)
</form>

$("#my-form").change(function(){ $(this).submit(); });

【问题讨论】：

回答这个问题的问题是你已经隔离了你认为是问题的地方，只显示了那一行。请显示相关的 HTML 和 javascript。
代码在我的办公室机器上——在这种情况下，我最早可以在明天显示代码。用代码更新了问题。
请在问题中发布代码。
$("#my-form").change(function(){ $(this).submit(); }); 真的触发了吗？ $("#my-form checkbox").change(function(){ $(this).submit(); }); 对我来说更有意义。
触发器完美无缺。您应该考虑到复选框不是表单中唯一的元素！还有输入字段、按钮等。

标签： javascript html ajax forms checkbox

【解决方案1】：

很抱歉浪费了大家宝贵的时间。

我发现了问题 - 我使用查询参数作为表单“操作”属性，所以每次我在提交之前刷新页面时，提交表单都会导致查询参数重复。

Easy :) 首先应该考虑一下。

【讨论】：