• 定義済み入力フィールドを持つ検索フォームのサンプル

簡単な説明

　HTML を理解できて、ある程度自分で書ける人。JavaScript の詳細までは判らないけれど、 コピー＆ペーストで設置程度ならできる人を対象にしています。個別の HTML の書き方に関する問合せはご勘弁。

Step 1. 定義済み入力フィールドを追加

　フォームにフィールドを追加するのと全く同じ要領で、必要なフィールドを追加します。サンプルを参考にして頂くと判りますが、追加されたフィールドは特に変わった書き方をしているわけではありません。至ってフツーに追加。

元からある検索フォーム外に置くことを強く推奨。

Step 2. JavaScript を追加

　サンプルページのソースコードを見ると、後半に JavaScript を定義している部分があります。<script> 〜 </script>をコピーして貴方のページにペーストします。

Step 3. JavaScript を修正

　コピー＆ペーストした JavaScript コードの中にある次の部分を修正します。Step 1.で追加したフィールドの name に指定した値に書き換えてください。

	// 検索クエリに追加するフィールドの名前
	var field_name = [ 'radioOS', 'radioOption', 'checkboxKeyword', 'selectProduct' ];

コンマ区切りで幾つでも書くことができます。

　このスクリプトは、field_name で指定したname を持つ入力フィールドを探し出して、そのチェック状態を判定して新しい検索クエリ文字列を作っています。トリッキーなことも無いと思うので、ほとんどのブラウザで動作すると思います。

Step 4. onsubmit を追加

　元からある <form> を修正します。onsubmit 以下を追加してください。

修正前：
<form action="..." method="...">

修正後：
<form action="..." method="..." onsubmit="return searchformOnSubmit(this);">

　確認のダイアログを表示させないようにするには、JavaScript 中の alert の行を削除してください。