ちょっと特殊なパターンでform.submit()が動かなくてハマったので共有しておきます。
formのサブミットを捕まえて、間にちょっとした処理を挿入したかったので下記のようにしました。
<form>
...
<input type="submit" name="submit-send" value="Send" />
</form>
<script>
var $form = $("form");
$form.submit(function(){
//一度処理したら正常にsubmitするためのフラグ
var submited = false;
if(submited === false){
submited = true;
//ここでちょっとした処理。
$form.submit();
return false;
}
});
</script>
フラグを使ってる辺りあまりきれいじゃありませんがご勘弁を。で、これで期待した通り動いたのですが、これを既存のとあるページに組み込んだところ動きませんでした。
そのページのサブミットボタンはこんな感じでした。
<form>
...
<input type="submit" name="submit" value="送信する" />
</form>
そう、nameがsubmitになっていました。
HTMLFormElementにはsubmit()という関数があって、フォームをjsからサブミットする時に使うのですが、jQueryのsubmit()もそれを利用してるようです。
で、HTMLFormElement、つまり上記コードの文脈でいうと$form[0]のもう一つの特徴として、内包するフォームエレメントにname属性でアクセスできるという特徴があります。$form[0].submitはサブミットボタンのエレメントをさすようになってしまい、関数が上書きされて呼べなくなったんですね。
さらに$form.submit()とjQuery経由で呼び出すとエラーにならずに何もおきないのでしばらく気づきませんでした。
回避する方法はStackOverFlowにありました。
var submit = HTMLFormElement.prototype["submit"].bind($form[0]);
submit();
prototypeから関数を取り出してthisをすり替えてやる感じですね。
この辺にメソッドやプロパティ一覧があるので、名前が被らないようにしたほうが色々良さそうですね。