使用JS提交表单时，POST变量未设置

Question

我有一个表单，当用户点击标签时，我使用JavaScript提交它。但是有一种奇怪的行为，即数据没有被提交。但是，如果我延迟提交表单（即使是0秒的延迟），它就可以正常工作。

以下是HTML代码：

<form action="/other-page" method="post">
    <input id="val-1" type="checkbox" name="filter[]" value="1">
    <label for="val-1">Value 1</label>

    <input id="val-2" type="checkbox" name="filter[]" value="2">
    <label for="val-2">Value 2</label>
</form>

脚本：

该脚本：

<script>
    $('label').click(function() {
        var form = $(this).closest('form')

        // if I use the following line the values won't be set
        form.submit()

        // If I use a `setTimeout` it works, even with a delay of 0
        setTimeout(function() {
             form.submit()
        }, 0)
    })
</script>

这并不是一个大问题，因为我可以使用 setTimeout 解决，但在延迟为 0 的情况下编写这样的代码真的很丑陋。我认为可能是浏览器bug，但我已在Chrome和Firefox上进行了测试，结果相同。

你有什么想法吗？

- romainberger

---

你是在 DOM 准备就绪时运行这个程序吗？ - David Fregoli

我假设 click 事件在值实际被更改之前被触发。 - Felix Kling

@DavidFregoli 是的，抱歉我忘记包含那个了。 - romainberger

尝试使用本地提交方法 form[0].submit()。 - Ram

@Bondye 我在这里不使用分号并不意味着我从不使用分号。但这不是问题的主题，而且，没有恶意，我不愿意在评论中开始争论 :) - romainberger

Answer 1

这是因为你监听的是标签点击事件。尝试监听复选框的点击事件。

$('input[type=checkbox]').click(function() {
    $(this).closest('form').submit();
});

点击标签意味着浏览器将“点击”相关元素。由于您在标签单击时提交表单，因此它不会给浏览器机会执行此操作。

为什么使用0的setTimeout可以工作，因为这是一个技巧，可以将执行推迟到浏览器完成其当前操作。您可以在此处找到更多信息：为什么setTimeout（fn，0）有时很有用？

- sroes

Answer 2

有人（我记不得他的用户名了）发布了解决方案，但由于被踩了，所以他删除了答案。但是他的解决方案是正确的，所以在这里：

我只需要在输入上使用点击事件而不是标签

$('input[type=checkbox]').click(function() {
        $(this).closest('form').submit()
})

- romainberger

---

是的，我删除了我的回答，直到我添加了解释。 - sroes

难以置信这个改变能解决问题，不过更可能的是你将其放在一个 domready 处理函数中，不是吗？ - metadings