jqueryのsubmitメソッドでフォームタグを直接指定するとPOSTされない

Question

すでに解決済みではありますが、処理が上手くいかなかった原因が分からず質問させていただきます。

Laravelアプリケーションの中で、jqueryのsubmitメソッドにて値をPOSTしようとしたところつまづきました。
内容としてはjqueryのsubmitメソッドを下記のように指定した場合POSTできず、GETにリダイレクトされてしまいました。

<form method="post" action="{{ hoge }}">
  <!-- 中略 -->
  <button type="button" id="button" class="common_form_submit">登録</button>
</form>

<script type="text/javascript">
    $('#button').on('click', function(){
        $(this).attr('disabled', 'disabled');
        $('form').submit();
    });
</script>

こちらを下記のように修正したところ、正常に動作しました。

<form method="post" action="{{ hoge }}" id="form>
  <!-- 中略 -->
  <button type="button" id="button" class="common_form_submit">登録</button>
</form>

<script type="text/javascript">
    $('#button').on('click', function(){
        $(this).attr('disabled', 'disabled');
        $('#form').submit();
    });
</script>

変更した内容としては、jqueryのsubmitメソッドに対して

$('form').submit();

として、formタグを直接指定していたのに対して、formタグに

id="form"

とし、id属性を与えた上で

$('#form').submit();

としたところ正常に動作しました。

developerツールのNetworkで見たところ、変更前のコードではformタグが２つ取れていたようです。
こちら上記ですでに解決はしたのですが、formタグを直接指定するとなぜPOSTメソッドがGETにリダイレクトされるのか原因は分かっていません。こちらお分かりの方がいたらご教示いただけると幸いです。

よろしくお願いいたします。

Comments

[m.ts10806]

>id="form>
のように属性値が正しく閉じられていなかったり、中略があったり全体がつかみにくいコードになっています。
できれば略さず、全体提示してください。一部ではなく、DOCTYPE宣言から全てです。
HTMLもBladeのものではなく、ブラウザに表示されたHTMLソースのほうが良いです。

Answer 1

developerツールのNetworkで見たところ、変更前のコードではformタグが２つ取れていたようです。

一つ目のフォームがGetで書かれていたのでしょう。

Comments

[tahataha]

実際のソースにはformタグは１つしか存在しませんでした。かつmethod属性にはpostが明記されておりました。すなわちご質問させていただきたい内容は

「なせformタグを直接指定するとソース上では１つしかないformがnetwork上で２つ取れているのか」、ということになります。

[kei344]

実際ブラウザに出力された時点（もしくはその後jsが書き換えた可能性もありますが）に「変更前のコードではformタグが２つ取れていた」なら2つ有ったと考えるのが妥当だと思います。

Answer 2

とりあえず、いくつあるかわからないなら最初の1つだけ実行対象にすることです

$('form:eq(0)').trigger('submit');