jsでformを送る(submitする)際に気をつけること。

以前、他のブログにも書いてた事にまた引っかかってしまったので。
改めて。

javascriptでフォームを送る方法

<form type="post" name="myForm" action="mofumofu">
  こんなフォームだよ―
  ...
</form>

javascriptの場合。

// javascript
document.myForm.submit();

jQueryの場合

// jQuery
var $form = jQuery('form[name="myForm"]');
$form.submit();

こんな感じのエラーが出ることがあります。

TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

こんな時は、

フォームパーツのname属性が原因！
formの中にあるボタンなどフォームパーツのname属性にsubmitを指定していると
javascripでformが送れなくなってしまいます。

<form type="post" name="myForm" action="mofumofu">
  ...
  <button type="submit" name="submit">俺だよ</button>
</form>

こんな風にname="submit"があれば

<form type="post" name="myForm" action="mofumofu">
  ...
  <button type="submit" name="submitButton">俺じゃないよ。</button>
</form>

の様にname="submit"を無くせばjavascriptでformをsubmitする事ができます。

javascriptだとエラーが出るのですが、jQueryだとエラーも出ないので忘れてるとハマります。特にHTML作る人とjs書く人が違うとか、マークアップする人とシステムに組み込む人が違うとかとか。そんな時にもなりそうだなぁと思います。(起こりました！)

form内のパーツにname="submit"は使わないってルールにするのが良さそうだと思いました。

昔の自分ありがとう！blog記事移植してないけど。

かもメモ