formの選択肢でJavascriptから吐き出した値を確認画面に表示させてその値を送信したい

実現したいこと

タイトルの通りになります。
例えばtest.htmlでselectを使用しoptionのvalueの値によって吐き出される値があり、その値をJavascriptで制御しています。
selectの値は確認画面(test.php)に表示されますが、Javascriptで吐き出された値を確認画面に表示させそのまま送信ボタンを押下し送信させるようにしたいです。

発生している問題・分からないこと

吐き出される値を確認画面にPOSTするにはどうしたらいいかわかりません。
該当のソースコードをコピーいたしました。

該当のソースコード

test.html

1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 2<form action="test.php" method="post"> 3 <div> 4 <p>商品名</p> 5 <select id="eat" name="name" size="1"> 6 <option value="">選択してください</option> 7 <option value="りんご">りんご</option> 8 <option value="バナナ">ばなな</option> 9 <option value="みかん">みかん</option> 10 </select> 11 <div id="eat-list"></div> 12 <script type="text/javascript"> 13 $('#eat').on('change', function () { 14 const selected = $('#eat').val(); 15 if ( selected === 'りんご' ) { 16 const eatList = document.getElementById('eat-list'); 17 eatList.innerHTML = ` 18 <div class="box"><p>金額</p><input name="price" value="100円" disabled></div> 19 <div class="box"><p>個数</p><input name="pieces" value="1個" disabled></div> 20 `; 21 } 22 else if ( selected === 'バナナ' ) { 23 const eatList = document.getElementById('eat-list'); 24 eatList.innerHTML = ` 25 <div class="box"><p>金額</p><input name="price" value="200円" disabled></div> 26 <div class="box"><p>個数</p><input name="pieces" value="1個" disabled></div> 27 `; 28 } 29 else if ( selected === 'みかん' ) { 30 const eatList = document.getElementById('eat-list'); 31 eatList.innerHTML = ` 32 <div class="box"><p>金額</p><input name="price" value="150円" disabled></div> 33 <div class="box"><p>個数</p><input name="pieces" value="1個" disabled></div> 34 `; 35 } 36 else { 37 $('#pet-list').hide(); 38 } 39 }); 40 </script> 41 </div> 42 43 <div class="btn"><input type="submit" name="sbm" value="申込をする"></div> 44</form>

test.php

1<form action="http://hogehoge.com" method="POST"> 2<div class="cart"> 3 <h1>ご注文内容</h1> 4 <div class="cart_"> 5 <table> 6 <tr> 7 <th>商品名</th> 8 <td><input name="name" value="<?php echo $_POST["name"] ?>" disabled></td> 9 <th>金額</th> 10 <td><input name="price" value="<?php echo $_POST["price"] ?>" disabled></td> 11 <th>個数</th> 12 <td><input name="pieces" value="<?php echo $_POST["pieces"] ?>" disabled>日</td> 13 </tr> 14 </table> 15 </div> 16 <a href="javascript:history.back()">戻る</a></div> 17 <input type="submit" name="submit" value="購入する"> 18</div> 19</form>

試したこと・調べたこと

上記の詳細・結果

Javascriptで吐き出された値をどのように確認画面に送るかわからない

補足

特になし

コメントを投稿

0 コメント