More than 5 years have passed since last update.

formのsubmitがおかしい時にチェックすべき3つの事

Posted at 2017-09-27

formの挙動ではまった箇所をまとめました。
あれ？っと思ったら確認してみてください。

##formが入れ子になっている

<form id="main">
  <form id="sub"></form>
</form>

エラーとかは起きません。
formが入れ子になっている場合、<form id="main"></form>の中のタグはソースから全て消え去ります。

##formを動的に追加した場合

  var $f = $('<form></form>');
  $f.append('<input type="hidden" name="age" value="20">');
  $f.submit();

これは動きません。htmlソース上にformがないので、Form submission canceled because the form is not connected とか出ます。なので

  var $f = $('<form></form>');
  $f.append('<input type="hidden" name="age" value="20">').appendTo($('body:first'));
  $f.submit();

これでbody内にformが追加され、送信できるようになります。

##buttonタグのtype

<button type="**">ボタン</button>

buttonタグのtypeは指定しないと、初期値でsubmit(送信)が入ります。

勝手にbutton(何もしない)だと思っていたので、謎の挙動に焦りました。

##参考