定義済み入力フィールドを持つ検索フォーム

Posted by
ぴろり
Posted at
2006/10/05 19:53
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
MovableType カテゴリ

 mixiMovableType コミュニティであった質問への解答の一つ。ラジオボタンやチェックボックスなどの入力フィールドが既に用意された検索フォームを作るにはどうすればよいか、という内容でした。特に MT に限った話でもなく、どちらかと言えば JavaScript の問題ですね。検索フォーム全般で広く使えそうなアイディアですし、MT のありきたりな検索フォームを格段に使いやすくできるかも?

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

簡単な説明

 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 の行を削除してください。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。