ちょっとハマったのでメモ。
静的な項目をチェックするなら jquery.validate.js で一発OKなのですが、動的に項目が増減するフォームで入力チェックをしたい時は自作しなきゃならない事がまま有ります。
今回複数ページに渡りそう言うフォームになっていて、一つ手前のページでは行けるのに次のページでは Uncaught TypeError: Property ‘submit’ of object と言うエラーが出てしまう。
どうやらその関数は既に有るから重複したものは作らないでくださいよー
と言うコンフリクト系のエラーらしい。
いや、でも一つ前のページでは機嫌良く動いてるじゃないですかやだー。と言う状態で少しハマったが、解決出来ました。
再現方法
javascript
1 2 3 4 5 6 | $(function() { $('#submit').click(function() { /* 小難しい処理とか色々 */ $('#form').submit(); }); }); |
html
1 2 3 4 | <form name="form" id="form" action="hoge.php" method="post"> <input type="text" name="hoge" id="hoge" value="" /> <img src="path/button.gif" id="submit" /> </form> |
これで少なくとも webkit 系のブラウザなら再現します。
ちなみに「onsubmit 使えよ！」と言われるかも知れませんが、私が今作成しているフォームはサブミットしなければならないボタンが同一フォーム上に3つ以上あります。
なので type に submit や image は使えなくて、img や button に関数を割り当てて各々パラメータ変更してから submit() してやると言う仕組みなんですね。
さてさて、google 先生に聞いても有効な回答が得られなかったので自分で考えてみます。
まずこのエラーはコンフリクト系のエラーと言う事は解ったので、ソースを見直して見る。
JS 側は動いているページが有るので問題無いはずなので、html に注目。
ああ、ひょっとして form 内から実行してるからか…？怪しいので html を変更。
html（訂正版）
1 2 3 4 | <form name="form" id="form" action="hoge.php" method="post"> <input type="text" name="hoge" id="hoge" value="" /> </form> <img src="path/button.gif" id="submit" /> |
直りました。
要するに #submit が form 内に入っていると form 自体が持っている function submit を継承か何かするようで、そこで submit() を実行するとエラーになる。と言う事らしい。
外に放りだした事により、親要素（書いてないけど）の div は funciton submit を持っていないからエラーが無くなった。やったね！
変な所でハマると時間気になって精神衛生上宜しく無いですよね。
