こんにちは。
ゆうや（@yuyaphotograph）です！
本記事では、URLパラメーターで遷移先のフォームのselect要素を選択する方法をご紹介します。
「URLパラメーター」というのは、「?変数=値」というようにURL末尾に付け加える文字列のことを言います。
身近な例で言えば、ブログのサイト内検索結果ページのURLが分かりやすいでしょう(^o^)
当ブログで、「ONE PIECE」と検索した時の検索結果ページのURLはこんな感じになります。
https://yuyauver98.me/?s=ONE+PIECE
ドメインの末尾に「?s=検索ワード」となっていることが確認できますね。
sはsearchの頭文字です。
今回はそのURLパラメーターを利用して値をセットしてみます。
それでは参りましょう！
URLパラメーターでフォームのselect要素を選択できるようになろう！
実装イメージ図の共有
実装したいことのイメージ図を作ったのでご覧ください(^o^)
↓↓↓
ボタンが3つあってクリックしたボタンによって選択される値が変わるというやつ
拙い図ですが伝わりましたかね？笑
URLパラメーターでselect要素を選択するポイント
今回の実装の要点をまとめると以下のようになります。
↓↓↓
- aタグのURLに条件分岐判定用のURLパラメーターをつけておく
- functions.phpにカスタムクエリなどを追加しておく
- 遷移先ページでswitch文でURLパラメーターの値によって条件分岐し該当のoptionタグを選択状態にする
それでは、1つずつコードを見ていきましょう。
aタグのURLにURLパラメーターをつける
<a href="<?php echo esc_url( home_url( '/contact/?option_id=1' ) ); ?>">項目1</a>
<a href="<?php echo esc_url( home_url( '/contact/?option_id=2' ) ); ?>">項目2</a>
<a href="<?php echo esc_url( home_url( '/contact/?option_id=3' ) ); ?>">項目3</a>「?option_id=数字」が肝です。
数字は遷移先ページでのswitch文で使用します。
functions.phpにカスタムクエリなどを追加する
add_filter( 'mwform_value_mw-wp-form-69', 'my_mwform_value', 10, 2 );
function custom_query_vars( $public_query_vars ) {
$public_query_vars[] = 'option_id';
return $public_query_vars;
}
add_filter( 'query_vars', 'custom_query_vars' );switch文で条件分岐する
page-contact.phpでscriptタグを追加してその中に以下を書いて下さいまし(^o^)
var option_id = '<?= get_query_var('option_id') ?>';
switch(option_id){
case '1':
document.querySelector('option[value="項目1"]').setAttribute('selected', 'true');
break;
case '2':
document.querySelector('option[value="項目2"]').setAttribute('selected', 'true');
break;
case '3':
document.querySelector('option[value="項目3"]').setAttribute('selected', 'true');
break;
default:
document.querySelector('option[value="選択してください"]').setAttribute('selected', 'true');
break;
}条件分岐を行った後、該当のoptionタグにsetAttributeメソッドを用いてselected属性の値をtrueにすることで予め選択した状態で表示することができます！
まとめ
以上、URLパラメーターで遷移先のフォームのselect要素を選択する方法をご紹介しました。
ぼくは友人のエンジニアに今回紹介した方法をやってもらい対処できたので同じ様に困っている方、きっといると思います。
本記事がその方の助けになれれば幸いです(^o^)
最後までご高覧いただきありがとうございました！
