LoginSignup
3
0

More than 5 years have passed since last update.

jQuery <form/> submit() の注意 on Firefox

Last updated at Posted at 2018-06-03

jQueryで動的にFormタグを作成しpost()するというテクニックがありますが、どうもFirefoxでは動かなくなる書き方があるようです。

このような書き方はいずれも正しく動きませんでした。
Chrome/Firefox(モバイル)では動くのに、Firefox(PC)ではdata_valueが0固定になってしまいます。

    $('<form/>', {'action': 'program.php', 'method': 'post'})
    .append($('<input/>', {'type': 'hidden', 'name': 'data_value'}).val(n))
    .appendTo(document.body)
    .submit(); // NOT WORK
    $('<form/>', {'action': 'program.php', 'method': 'post'})
    .append($('<input/>', {'type': 'hidden', 'name': 'data_value', 'value': n}))
    .appendTo(document.body)
    .submit(); // NOT WORK
    $('<form action="program.php" method="post"/>')
    .append($('<input type="hidden" name="data_value"/>').val(n))
    .appendTo(document.body)
    .submit(); // NOT WORK
    var post = $('<form/>', {'action': 'program.php', 'method': 'post'})
    .append($('<input/>', {'type': 'hidden', 'name': 'data_value', 'value': n}))
    .appendTo(document.body)
    post.submit(); // NOT WORK

しかし以下のようにformにidを付与し、idを使ってセレクタで選択し直し、ネイティブのsubmit()を呼ぶと正しく動作します。

    $('<form/>', {'action': 'program.php', 'method': 'post', 'id': 'myForm'}) //書き方は自由
    .append($('<input/>', {'type': 'hidden', 'name': 'data_value'}).val(n)) //   ↑
    .appendTo(document.body)
    $("form#myform")[0].submit(); // WORK!

海外のフォーラムでもFirefoxでは確実に存在するFormしか受け付けない?
ID無しのappend()appendTo()ではネイティブのDOMメモリ上のform[]に反映されない?
などの憶測が飛び交っていますが、確たる証拠はなさそうです。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0