フォームで自動的にサブミットしたい方やうまくコーディングできない方のトラブルシューティングです。
まずは、Selectボックスとはどういうものかをこのブログのパーツを例に説明しましょう。
Selectボックスとコーディング
Selectボックスはこのブログの右上にある以下のような外形のHTMLパーツです。
値を選択するのは、Selectボックスにフォーカスするだけ。たとえばPCの場合は、右上の矢印をクリックすると、下記のように選択可能な値が表示されます。
上記に示したパーツの実際のコーディングは以下のとおり、
<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）の書き方にはいくつかの方法があります。方法１：submit(this.form)
submit関数に、自分のフォームをパラメータとして指定する方法です。onchange=”submit(this.form)”
方法２：this.form.submit()
自分のフォームのsubmitメソッドを呼び出す方法です。onchange=”this.form.submit();”
方法３：document.forms.submit()
もっとも一般的（古い？）にやるとしたら、この方法。onchange=”document.forms.submit();”
上記に３つの方法のうち、どれでも動作は一緒になります。
どうでしょうか、実際に動作検証できましたか？
あれ？あれ？
Submit is not a function??
submitファンクションが未定義ですって？
Submit is not a function
「Submit is not a function」というエラーがでたトラブルシューティングです。これは結構だれでも遭遇しやすいエラーで、しかも一度体験してしまえば大したことはないのですが、１時間ぐらいははまってしまう方がいるかも知れません。そうなる前にこの対処方法を読んでください． あなたはたぶんこんなコーディングをしています。 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=”検索する” />
となります。
以上
