SelectボックスはOnChangeでフォームをサブミットする

フォームで自動的にサブミットしたい方やうまくコーディングできない方のトラブルシューティングです。

Initializing...

まずは、Selectボックスとはどういうものかをこのブログのパーツを例に説明しましょう。

Selectボックスとコーディング

Selectボックスはこのブログの右上にある以下のような外形のHTMLパーツです。

selectボックスの外見

値を選択するのは、Selectボックスにフォーカスするだけ。たとえばPCの場合は、右上の矢印をクリックすると、下記のように選択可能な値が表示されます。

Selectボックスの選択値を表示した画像

上記に示したパーツの実際のコーディングは以下のとおり、

<select id="tag_id" name="tag_id" onchange="submit(this.form);">
<option selected="selected" value="">すべてのタグ</option>
<option value="62">xserver</option>
<option value="176">エラー</option>
<option value="177">mysql</option>
<option value="194">サムネール表示</option>
<option value="195">ツールバー</option>


</select>

このパーツのコーディングはご覧のとおり、Select文とoption文だけです。これらの構文については、詳細は今回は省きますので、必要な方は下記のリンクなどから調べて見てください。


自動的にフォームをサブミット

選択値を選択した場合に、自動的にフォームをサブミットしたいと思うかも知れません。通常こういった場合は、JavaScriptを使います。
上記の例で言えば、Select文中の「onchange=”submit(this.form);”」がこれにあたります。選択値を選択(変更)した場合、onchangeイベントが発生します。このonchangeイベントをとらえて実行するJavascriptをコーディングします。
このコーディング(submit)の書き方にはいくつかの方法があります。

方法1:submit(this.form)

submit関数に、自分のフォームをパラメータとして指定する方法です。

onchange=”submit(this.form)”

方法2:this.form.submit()

自分のフォームのsubmitメソッドを呼び出す方法です。

onchange=”this.form.submit();”

方法3:document.forms.submit()

もっとも一般的(古い?)にやるとしたら、この方法。

onchange=”document.forms.submit();”

上記に3つの方法のうち、どれでも動作は一緒になります。

どうでしょうか、実際に動作検証できましたか?
あれ?あれ?
Submit is not a function??
submitファンクションが未定義ですって?

Submit is not a function

「Submit is not a function」というエラーがでたトラブルシューティングです。これは結構だれでも遭遇しやすいエラーで、しかも一度体験してしまえば大したことはないのですが、1時間ぐらいははまってしまう方がいるかも知れません。そうなる前にこの対処方法を読んでください.

あなたはたぶんこんなコーディングをしています。
formのなかで、サブミットボタンを使っていませんか?
しかも

<input id=”submit” type=”text” value=””検索する”” />

これが原因です。
input文で、nameまたはidに“submit”を定義するとform中のsubmitを書き換えてしますので、上記のJavascriptと”submit”というinputは共存出来ないのです。共存するには、input文のnameやidで定義しているsubmitを別の名前に書き換えてやればいいのです
私の場合は、

<input id=”submit_btn” type=”submit” value=”検索する” />

となります。
以上

当記事に関心にある人向けの記事は

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る