JSでフォームを送信するときに投稿変数が設定されていない

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の遅延でこれを書くことが本当にあります醜い。私はブラウザのバグについて考えましたが、私はChromeとFirefoxでテストしましたが、私は同じ結果を持っています。

何が起こっているか考えてみましょうか？

Answer 1

これは、ラベルのクリックを聞いているためです。チェックボックスのクリックを聞いてみてください。

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

ラベルをクリックすると、ブラウザは関連する要素を「クリック」します。また、ラベルをクリックしてフォームを送信しているため、ブラウザはこれを行う機会を与えません。

setTimeoutが0であるのはなぜですか？これは、ブラウザが現在のアクションで終了するまで実行をポストするトリックだからです。これについての詳細は、Why is setTimeout(fn, 0) sometimes useful?

Answer 2

誰か（彼のユーザ名は覚えていない）が解決策を投稿したが、彼は彼の答えを削除するようにdownvotedを得た。しかし、彼のソリューションは、右のようにここにあるた：

私がやらなければならないことは、代わりにラベル

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