Q&A
ご回答ありがとうございます。
教えて頂いたように、確認画面でコードを元にDBにから情報を取得する方法で
確認画面の実装はできました。
＞一つでもフォームに値を入力した場合、その行は全て入力必須にする仕組みの構築方法
こちらはやり方が分からずつまづいている状況です。
実現したいこと
以下の画像のような、法人が商品を購入できるフォームを作成しています。
プルダウンの「選択してください」からは、DBに登録済みの購入者などの情報を表示します。
同じ購入者は何度でも選択可能です。
「オーダー内容を確認する」ボタンを押すと次のページで購入内容の確認が行えます。
最終的には購入データがDBに登録される流れになります。
「購入者」と「商品」のプルダウンメニューにはそれぞれ「購入者の名前と購入者コード」「商品の名前と商品コード」が
それぞれ表示されます。購入者と商品の名前は確認画面の確認用に表示し、DBに登録されるのは商品コードと
購入者コードだけにしたいです。
困っている事
いくつか分からないことがあります。
（１）選択した「購入者の名前と購入者コード」「商品の名前と商品コード」をそれぞれ確認画面に渡し、
DBにはコードのみ登録する方法。
→名前とコード両方を確認画面に渡すために、DBから情報を取得して
<option value="$p['person_code'],$p['person_name']">のように「,」で区切りました。 そして、確認画面でexplode()関数を使用して名前とコードを分割し、コードをDBに登録しようとしましたができませんでした。 中身を確認したところ以下のように表示されました。PHP
1$person_code = $_POST['person_code']; 2foreach($person_code as $p){ 3 print_r(explode(",", $p)); 4} 5 6//実行結果 7Array ( [0] => 購入者コード購入者名 ) Array ( [0] => 購入者コード購入者名 ) 8 9
なぜ一つ一つ配列で返されるのか、そしてexplode()で区切れないのかが分かりません。
（２）一つでもフォームに値を入力した場合、その行は全て入力必須にする仕組みの構築方法
例えば１行目の「購入者」をプルダウンメニューから選択した場合、
その行の「商品」と「個数」を入力しないと確認画面に飛べないようにしたいです。
コード
PHP
1 2<!------オーダー画面--------> 3<form method="post" action="order_confirmation.php"> 4 <p style="padding-bottom: 30px;"><input type="submit" value="オーダー内容を確認する"></p> 5 <table border="1"> 6 <tr><th></th><th>購入者</th><th>商品</th><th>個数</th></tr> 7 <?php 8 //データを全て配列で取得 9 $number = 1; 10 while($number<=15) : 11 ?> 12 <tr> 13 <td><?php echo $number ?></td> 14 <td> 15//foreachで取り出している情報はDBより取得したもの 16 <select name="person_code[]"> 17 <option disabled selected>選択してください</option> 18 <option value="0"><?php echo sprintf("%04d", 0) . '：施設' ?></option> 19 <?php foreach($p_rows as $p) : //h()はhtmlspecialcharsを実行する ?> 20 <option value="<?php echo $p['person_code'],$p['person_name'] ?>"><?php echo h(sprintf("%04d", $p['person_code'])) . '：' . h($p['person_name']) ?></option> 21 <?php endforeach; ?> 22 </select> 23 </td> 24 <td> 25 <select name="item_code[]"> 26 <option disabled selected>選択してください</option> 27 <?php foreach($i_rows as $i) : ?> 28 <option value="<?php echo $i['item_code'],$i['item_name'],$i['price'] ?>"> 29<?php echo h($i['item_name']) . '：' . h($i['price']) . '円' ?></option> 30 <?php endforeach; ?> 31 </select> 32 </td> 33 <td><input type="text" name="quantity[]" maxlength="10" placeholder="例)1">個</td> 34 </tr> 35 <?php $number++; ?> 36 <?php endwhile; ?> 37 </table> 38 <input type="hidden" name="created_at"> 39</form> 40
確認画面
PHP
1<?php 2 3$person_code = $_POST['person_code']; 4$item_code = $_POST['item_code']; 5 6$max_person_code = count($_POST['person_code']); 7$max_item_code = count($_POST['item_code']); 8 9$count_number = 0; 10?> 11 12<!------確認画面。作りかけ--------> 13 <section class="common_wrapper"> 14 <h1>オーダー確認ページ</h1> 15 <div class="data_list_wrapper"> 16 <table border="1"> 17 <tr><th>名前</th><th>商品</th><th>金額</th></tr> 18 <?php while($count_number < $max_person_code) : ?> 19 <tr> 20<!--購入者の名前を$p['person_name']として表示したい --> 21 <td> 22 <?php foreach($person_name as $p) : ?> 23 <?php echo h($p['person_name']) ?> 24 <?php endforeach; ?> 25 </td> 26 <td><?php ?></td> 27 <td><?php ?></td> 28 </tr> 29 <?php $count_number++; ?> 30 <?php endwhile; ?> 31 </table> 32 </div><!--/.data_list_wrapper --> 33 </section><!--/.common_wrapper --> 34
2つ目の質問の「一つでもフォームに値を入力した場合、その行は全て入力必須にする仕組みの構築方法」について
質問１「選択した「購入者の名前と購入者コード」「商品の名前と商品コード」をそれぞれ確認画面に渡し、
DBにはコードのみ登録する方法」は解決しました。
質問２についてですが、ご回答頂いた内容を貼って動かしてみました。確かにその行のinputはrequiredが付与されて
意図したようになりました。しかしselectは選択せずとも先に進めてしまいます。
そこで自分なりに以下のようなコードを書いてみました。
やはりinputタグにはrequiredが付与されるのですが、selectタグは無反応です。
どのようにするとその行全てを選択しないと先に進めなくなる仕組みが構築できるでしょうか。
jQuery
1 2$("select").on('change', function(){ 3 console.log('成功'); 4 var parentTr = $(this).parents("tr"); 5 parentTr.find("select").required; 6 parentTr.find("input").required; 7}); 8
ご回答いただけると助かります。
よろしくお願い致します。
回答2件
0
ベストアンサー
javascript
1<?PHP 2print_r($_POST); 3?> 4<script> 5document.addEventListener('input',e=>{ 6 const d=[...e.target.closest('tr').querySelectorAll('select,input')]; 7 const flg=d.map(x=>x.value).filter(x=>x!=="").length>0; 8 console.log(flg); 9 d.forEach(x=>x.required=flg); 10}); 11</script> 12<form method="post"> 13<table border> 14<tr> 15<td> 16<select name="u[0]"> 17<option value="">---</option> 18<option value="user1">user1</option> 19<option value="user2">user2</option> 20<option value="user3">user3</option> 21</select> 22</td> 23<td> 24<select name="p[0]"> 25<option value="">---</option> 26<option value="product1">product1</option> 27<option value="product2">product2</option> 28<option value="product3">product3</option> 29</select> 30</td> 31<td> 32<input type="number" name="q[0]" min="0"> 33</td> 34</tr> 35<tr> 36<td> 37<select name="u[1]"> 38<option value="">---</option> 39<option value="user1">user1</option> 40<option value="user2">user2</option> 41<option value="user3">user3</option> 42</select> 43</td> 44<td> 45<select name="p[1]"> 46<option value="">---</option> 47<option value="product1">product1</option> 48<option value="product2">product2</option> 49<option value="product3">product3</option> 50</select> 51</td> 52<td> 53<input type="number" name="q[1]" min="0"> 54</td> 55</tr> 56<tr> 57<td> 58<select name="u[2]"> 59<option value="">---</option> 60<option value="user1">user1</option> 61<option value="user2">user2</option> 62<option value="user3">user3</option> 63</select> 64</td> 65<td> 66<select name="p[2]"> 67<option value="">---</option> 68<option value="product1">product1</option> 69<option value="product2">product2</option> 70<option value="product3">product3</option> 71</select> 72</td> 73<td> 74<input type="number" name="q[2]" min="0"> 75</td> 76</tr> 77</table> 78<input type="submit" value="send"> 79</form>
投稿2021/05/27 01:24
総合スコア114903
0
なぜ一つ一つ配列で返されるのか、そしてexplode()で区切れないのかが分かりません。
<select name="person_code[]">に対して、
<option value="<?php echo $p['person_code'],$p['person_name'] ?>">とせず
<option value="<?php echo $p['person_code']; ?>">にすれば、コードだけ受け取れますよ。
explode()でコードと名前を分離してから使うの、シンプルじゃないなぁと思いました。
おなじく、
<select name="item_code[]">に対して
<option value="<?php echo $i['item_code'],$i['item_name'],$i['price'] ?>">とせず
<option value="<?php echo $i['item_code'] ?>">にするとコードだけ受け取れますよ。
確認画面では、コードをもとに他の情報をデータベースから補うとよいかと。
一つでもフォームに値を入力した場合、その行は全て入力必須にする仕組みの構築方法
<select name="person_code[]">に対して、onchangeイベントにて、
他の入力項目のrequiredをjavascriptから制御するやりかたができそうです。
もう一つ、yambejpさんの回答にもありますが、
person_code[]とitem_code[]がペアであることの確実性を高めるために、
カウンター変数など駆使して、
person_code[0]とitem_code[0]
person_code[1]とitem_code[1]
などとなるように、ナンバリングするようなHTML出力をするべきです。
投稿2021/05/27 01:12
編集2021/05/27 01:28
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/27 07:03
2021/05/27 07:33
2021/05/27 07:46
2021/05/27 07:50