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

フォームで自動的にサブミットしたい方やうまくコーディングできない方のトラブルシューティングです。
まずは、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. この記事へのトラックバックはありません。

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