前提・実現したいこと
PHPをベースにして入力フォームを作っています。
プルダウンメニューの選択肢以外の「その他」の要望も多くなりそうなので、ユーザが「その他」を選択したら、テキストボックスを出現させてそこにフリーコメントをかいてもらう仕組みにしました。
スマートフォンユーザがテキストボックスが出現したことに気づきやすいように、JavaScriptを使って「その他」を選択された場合ににゅっと表示させるようにしてみました。
ここで悩んでいるのが、JavaScriptのテキストボックスの値を、どうやってPHPに渡すかという点です。
「その他」も含めたプルダウンメニューの選択肢については、POSTを使って次ページへ送ることができていますが、JavaScriptのテキストボックスの値をどうやって最終的にPHPで受け取るか。そもそも、JavaScriptの値をPHPに渡すことが可能なのか・・・?
試行錯誤していますが前に進めない状況です。
どなたか有識者の方のお知恵を拝借できたら幸いです。
どうぞ宜しくお願い致します。
※今はまだ検証中なので、サニタイズ処理などは実装していません。
※一度、文字数制限にひっかかってしまったので、コードは最低限必要と思われる部分のみ記載しています。
該当のソースコード(page1.php)
<!DOCTYPE html> <HTML> <HEAD> <TITLE>食事の希望</TITLE> <META http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META name="viewport" content="width=device-width, initial-scale=1"> </HEAD> <BODY> <section id="content" class="input"> <FORM METHOD="POST" ACTION="page2.php"> <dl class="form-inner"> <dt class="form-title">食事の希望</dt> <select id='ex_food' name='food' class='select'> <option value=1 selected>選択してください</option> <option value=2 >和食</option> <option value=3 >洋食</option> <option value=4 >中華</option> <option value=5 >その他</option> </select> <!-- 「その他」が選択されたらテキストボックスを表示させる--> <div id="ex_food_box_div" style="display:none;"> <input id="ex_food_box" type="text" /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> document.getElementById("ex_food").addEventListener("change", function(){ var equipment_type_elem = document.getElementById("ex_food"); var s_value = food_elem.options[food_elem.selectedIndex].value; if(s_value == 5){ $("#ex_food_box_div").show("normal"); }else{ $("#ex_food_box_div").hide("normal"); } }, false); </script> <INPUT TYPE="submit" class="btn btn-square" VALUE="確認"> <button type="button" class="btn btn-back" onclick="history.back()">戻る</button> </FORM> </section> </BODY> </HTML>
試してみたこと
document.getElementById("ex_food_box").value;
などのようにしてテキスト入力値を取得してから、どうにかしてPHPに渡せないものかと思うのですが・・・この先がわかりません。
(このページ内でPHPに渡せるのか、次のページでPHPで受け取るのか、方法は問いません)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/08/17 23:28