用JS提交表单时未设置的Post变量

Post variables not set when submitting a form with JS

本文关键字：设置 Post 变量 JS 提交 表单      更新时间：2023-09-26

我有一个表单，我提交与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测试了一下，结果是一样的。

知道发生了什么事吗?

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

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

点击标签意味着浏览器将"点击"关联的元素。由于您是在单击标签时提交表单的，因此它不会给浏览器这样做的机会。

setTimeout with 0之所以有效，是因为这是一个技巧，直到浏览器完成当前操作后才发布执行。您可以在setTimeout(fn, 0)有时有用的原因中找到更多信息?

有人(我不记得他的用户名)发布了解决方案，但被否决了，所以他删除了他的答案。但他的解决方案是正确的，所以在这里:

我所需要做的就是在输入上使用click事件而不是标签

$('input[type=checkbox]').click(function() {
        $(this).closest('form').submit()
})
相关文章：