とあるWebサイトで、条件を最大5件まで指定して絞り込みができる仕組みがありました。
絞り込み条件を5件まで指定すると、それ以上は指定できないように作られていて、現在指定している条件を一発で解除できるリセットボタンも用意しています。
…と、ここまででピンと来た方がいたとしたら、非常にありがたいことです。
そう、先日の「Webサイトの絞り込みで最大件数を超えて選択できてしまう状況？」という記事で登場したサイトの管理者から、別件でヘルプが来たのです。
今回は、SNSなどからリンクする際に、既に絞り込んだ状態で飛ばしたい。サイト上のフォームで絞り込むと選択項目は配列で入ってくるけど、SNSからGETでパラーメータを渡すのに配列で記述するとURLが長くなってイヤ。
できれば、サイト上でもSNSからでも、複数項目選択された場合に配列ではなくカンマ区切りで受け取りたいから何とかして！…そんな今日のヘルプ。
一度情報を整理します
とあるWebサイトは、PHPを使用しています。
現在、サイト上では絞り込みをPOSTでやり取りしています。
SNSからのリンクで、絞り込みをした状態にさせたいなら、GETでパラメータを受け取る必要があります。
通常、チェックボックスで複数選択されたデータのやり取りでは配列を使いますので、これをGETで記述するなら、?aaa[]=1&aaa[]=2&aaa[]=3 といった書き方になります。
この記述を ?aaa=1,2,3 という書き方で行いたい、という話です。
サクッとJavaScriptで実装
POSTを止めて、GET一択にしてJavaScriptで実装してみます。
今回は、ひとつめのチェックボックスグループ「model」と、ふたつめのチェックボックスグループ「type」があると想定しています。
まずはJavaScriptの処理部分。
function form_send(){
let obj = document.forms['test_form'];
let str_model = "";
for( i = 0; i < obj.elements["model"].length; i++ ){
if( obj.elements["model"][i].checked ){
if( str_model == "" ){
str_model = obj.elements["model"][i].value;
} else {
str_model += ( "," + obj.elements["model"][i].value );
}
}
}
let str_type = "";
for( i = 0; i < obj.elements["type"].length; i++ ){
if( obj.elements["type"][i].checked ){
if( str_type == "" ){
str_type = obj.elements["type"][i].value;
} else {
str_type += ( "," + obj.elements["type"][i].value );
}
}
}
window.location.href = obj.action + "?" + "model=" + str_model + "&type=" + str_type;
return false;
}GET渡しをするので、最終的にパラメータを生成して window.location.href でリンクしています。
続いて、html部分。
<form method="post" name="test_form" action="test.php">
<input type="checkbox" name="model" value="model_a">Model_A<br>
<input type="checkbox" name="model" value="model_b">Model_B<br>
<input type="checkbox" name="model" value="model_c">Model_C<br>
<input type="checkbox" name="type" value="type_a">Type_A<br>
<input type="checkbox" name="type" value="type_b">Type_B<br>
<input type="checkbox" name="type" value="type_c">Type_C<br>
<input type="button" name="submit" value="送信" onClick="return form_send();">
</form>action=""の中は、実際にこの処理を入れたファイル名に置き換え必須です。
動作確認は、ブラウザのURL欄を見るか、$_SERVER["QUERY_STRING"]の値を表示させてみれば良いでしょう。例えば全てチェックを入れて送信ボタンを押した場合、パラメータは以下のようになるはずです。
model=model_a,model_b,model_c&type=type_a,type_b,type_cさいごに
ということで、チェックボックスで複数の項目を選択された場合に、配列ではなくてカンマ区切りでパラメータを受け取る方法を考えてみました。
もっとシンプルにできそうな気がしますので、実装する場合は頭をひねってみていただければ、と。
今日の作業は以上です。お疲れ様でした！
コメント