読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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

javascript jQuery HTML

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

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記事移植してないけど。