質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3419閲覧

URL引数の内容に応じて、自動的にセレクトボックスの値が選ばれるようにしたい

Yashichi

総合スコア35

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/06/14 05:11

編集2017/06/14 05:17

###前提・実現したいこと
WordPressのプラグイン「MW WP FORM」を使用してお問合せフォームを製作中です。
その中で、
イメージ説明
セレクトボックスとなっている一番上の項目を『選択してください』以外のものにデフォルトで指定できるようにしたいです。
このセレクトボックスの項目は『選択してください』『陶芸セミナー』『起業セミナー』となっています。

###試したこと

PHP

1<script> 2$(function() { 3 4 //イベントの自動選択 5 <?php if ($_GET['seminar'] != NULL): ?> 6 if ($('.seminar').val() == '') { 7 $('.seminar').val('<?php echo $_GET['seminar']; ?>'); 8 } 9 <?php endif ?> 10}); 11</script>

###発生している問題

URLに下記の様に引数を設定することで、セレクトボックスに選ばれるデフォルトの値を変えたいのですが、URLが変化するだけで、実際のセレクトボックスには何の変化も起こっていません。

/contact?seminar=起業セミナー

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress4.7.5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

セレクトボックスのそれぞれのoptionのvalueはどうなっていますか?
.val()で指定するのはvalueの設定値です。
セレクトボックスの選択指定の前にif ($('.seminar').val() == '') {が入っていますが、セレクトボックスが未選択ではないときに対応が出来なくなってしまいます。

また、GETですとURLを任意に書き換えることも可能なため、悪意のあるユーザーから攻撃コードを埋め込まれる可能性もあります。
HTMLエスケープを入れるか、出来れば別のやり方(セッションを利用したりDB値にしたり)をご検討ください。

投稿2017/06/14 05:24

編集2017/06/14 05:27
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yashichi

2017/06/14 05:46

optionのvalueは以下のようになってます。 <div id="mw_wp_form_mw-wp-form-160" class="mw_wp_form mw_wp_form_input "> <form method="post" action="" enctype="multipart/form-data"> <select name="セミナー" class="seminar"> <option value="選択してください。" >選択してください。</option> <option value="陶芸セミナー" >陶芸セミナー</option> <option value="起業セミナー" >起業セミナー</option> </select>
m.ts10806

2017/06/14 06:00

if ($('.seminar').val() == '') { } をはずして下さい。 $('.seminar').val() をalertかconsoleで出力してみると分かりますが「選択してください。」と出力されるはず。 セレクトボックスは何もしなければ一番上のoptionがデフォルトで表示されますし、javascript側でもその状態の値を取得します。 つまり今回の作りでは「if($('.seminar').val() == '')」の状況は起き得ないということになります。
Yashichi

2017/06/14 06:41

該当箇所を外しましたら上手く行きました。 ありがとうございます!
m.ts10806

2017/06/14 06:44

上手くいったようで良かったです。 余談ですが、セキュリティ上、本来は任意で自由に入力・変更可能な情報をJavaScriptに埋め込むべきではないのですが、どうしても埋め込まなければならない場合は、回答にリンクを貼った「HTMLエスケープ」の対応を適宜入れてやる必要があります。そちらもぜひご検討ください。
Yashichi

2017/06/14 07:24

URLの最後に手動で入力する場合、どこをいじればHTMLエスケープできるんでしょうか?
m.ts10806

2017/06/14 07:36

HTMLエスケープはあくまで「画面出力時に」行います。こんな感じ↓ $('.seminar').val('<?php echo esc_html($_GET['seminar']); ?>'); 参考URLにあったWordPressの関数を利用していますが当方WordPressが利用できる環境下ではないので未検証です。 状況に応じてwp_kses_post()やwp_strip_all_tags()など適宜入れてください。 また、if ($_GET['seminar'] != NULL) だけだと seminarがなかった場合やあるものの値が設定されていない場合( ?seminar= )、値は設定されているがセレクトボックスにない値の場合もあるので、仕様にあわせてチェックを入れると良いです。
Yashichi

2017/06/14 07:47

$('.seminar').val('<?php echo esc_html($_GET['seminar']); ?>'); これにしたらURLの日本語部分がたくさんの記号に変わりました!
m.ts10806

2017/06/14 07:54

URLエンコードされたみたいですね。URLデコード入れてあげましょう。 $('.seminar').val('<?php echo esc_html(urldecode($_GET['seminar'])); ?>');
Yashichi

2017/06/14 08:00

入れてみました。 どうしてエンコードして日本語の文字列を記号にしたのに元に戻しちゃうんでしょうか...。
m.ts10806
Yashichi

2017/06/14 08:07

あ、なるほど...! そういう意図だったんですね。その、エンコードをすることで日本語を記号化したあとにデコードしてるってことは、結果的に何もしてないのと同義だったりしないのでしょうか?
m.ts10806

2017/06/14 08:13 編集

URLエンコードは例えばaタグなどに埋め込むときに使います。例えばスラッシュなどが入るとディレクトリの区切りとして解釈してしまい思わぬバグを生んでしまうので必要です。(あとスペースとかその他記号も) デコードについては私も勉強不足なところがありました。 http://php.net/manual/ja/function.urldecode.php $_GETは既にデコード済みだから$_GETに対しては使うなとありますね・・・。大変失礼しました。
Yashichi

2017/06/14 08:18

たしかにスラッシュがディレクトリの区切りとして認識されるのは危険ですね。。 マニュアルには警告って書いてありますね、もっと自分も精進します! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問