submit is a not function って言われた

javascriptでフォームのデータを送信する場合はsubmit()を使う。

document.getElementById('form_id').submit();

先日、Ajaxで処理を行う場面に出くわしたときにこのsubmit()を使ったのだけど、とあるページでだけエラーが起きた。

$('form_id').submit is not a function

こんな感じのエラー。あ、document.get～が$になってるのはprototype.jsを使用してるからね。

いくつかのページで同様の処理を行っていたのだけど、一つのページでだけこのエラーが出て、どうにも先に進まなかった。

で、調べた結果たどり着いたのがこちら

＞どうやらidやname属性が “submit” になってる部品があると、JavaScriptのFormオブジェクトのsubmit()が上書きされる模様。

ということなんだそうです。

ああ、言われてみれば確かに。CakePHPでsubmitボタンの種類別の判定をしようとして、$this->params[‘form’][‘submit’]に値を入れるために、submitボタンにsubmitっていうname属性をつけていました。

<input type="submit" name="submit" value="送信" />

//データ送信時の値
$this->params['form']['submit] => 送信

確認画面を挟んだ処理とかのときにね、この値をswitch文とかで判定しようと思ってやったことだったんだけど、まさかそれがこんなところに影響を及ぼすとは、思いもよりませんでした。まあ、分かってしまえば解決方法は至って簡単。name属性を別のに変えれば良い。

<input type="submit" name="send" value="送信" />

//データ送信時
$this->params['form']['send'] => 送信

上記の参考サイトさんには、これは当たり前すぎる的なことを書いてあるんですが……そーだったんですか。

でもそういう当たり前のことに気づかないことだって、たまにはあるよね。人間だもの。
（僕の場合は気づかなかったんじゃなくて知らなかっただけですけど……）

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。