Q&A
nameとidの使い方は、何を参考にされましたか？ idは配列っぽい表記ができなかったような気がするのですが。webブラウザの開発者ツール内コンソールなどで、何らかのエラーが表示されそうな気がしますが。
前提・実現したいこと
お問い合わせフォームをphpで作成しております。
【構造について】
商品内容入力画面 → 個人情報入力画面 → 確認画面 → 送信完了画面
という構造です。
商品内容入力画面で複数の項目が入力された場合に確認画面でその商品情報を自動的に表示する方法を教えていただきたいです。
商品入力画面は項目の追加ボタンがありますが確認画面ではボタンを押し表示ではなく、
入力された項目の数だけ自動的に商品情報１、商品情報２という形で表示させたいです。
現状、商品情報１つと個人情報は確認画面で表示できます。
補足
商品情報「id="form_block[0]"」の内容は問題なく確認画面で表示されております。個人情報も表示されています。
「id="form_block[1]"」以降が確認画面へPOSTされません。
実装したいこと
商品情報の「追加する」ボタンをクリックすると「id="form_block[0]"」（商品情報１）が「id="form_block[1]"」（商品情報２）のように追加されていく仕様です。
その「id="form_block[1]"」（商品情報２）以降が入力されるとそれを自動的に確認画面で表示させたいです。
該当のソースコード
商品情報入力画面（input.php）
php
1<?php 2// フォームのボタンが押されたら 3if ($_SERVER["REQUEST_METHOD"] == "POST") { 4 // フォームから送信されたデータを各変数に格納 5 $syouhin = $_POST["syouhin"]; 6 $model = $_POST["model"]; 7 $jyoutai = $_POST["jyoutai"]; 8 $file = $_POST["file"]; 9 $name = $_POST["name"]; 10 $furigana = $_POST["furigana"]; 11 $email = $_POST["email"]; 12 $tel = $_POST["tel"]; 13 $sex = $_POST["sex"]; 14 $item = $_POST["item"]; 15 $content = $_POST["content"]; 16} 17 <div id="contact_form"> 18 <form action="input2.php" method="post" name="form" onsubmit="return validate()"> 19 <h1 class="contact-title">商品内容入力</h1> 20 <p>商品内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> 21 22 <div class="form-block" id="form_block[0]"> 23 <!-- Closeボタン --> 24 <span class="close" title="Close" style="display: none;">-</span> 25 <dl> 26 <dt><label>商品名<span>必須</span></label></dt> 27 <dd><input type="text" name="syouhin[0]" id="syouhin[0]" placeholder="例）test" value=""></dd> 28 </dl> 29 <dl> 30 <dt><label>型番・モデル<span>必須</span></label></dt> 31 <dd><input type="text" name="model[0]" id="model[0]" placeholder="例）00000" value=""></dd> 32 </dl> 33 <dl> 34 <dt><label>商品状態<span>必須</span></label></dt> 35 <dd> 36 <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="新品"> 新品 37 <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="中古"> 中古 38 <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="故障"> 故障 39 </dd> 40 </dl> 41 <dl> 42 <dt><label>商品画像<span>必須</span></label></dt> 43 <dd><input type="file" name="file[0]" id="file[0]" value="" multiple></dd> 44 </dl> 45 </div> 46 <!-- Addボタン --> 47 <div class="form-block" id="form_add"> 48 <span class="add" title="Add">追加する</span> 49 </div> 50 <div class="button_con"> 51 <button type="submit" name="send" class="send_btn">個人情報入力画面へ</button> 52 </div> 53 </form> 54 </div>
個人情報入力画面（input2.php）
php
1<?php 2// フォームのボタンが押されたら 3if ($_SERVER["REQUEST_METHOD"] == "POST") { 4 // フォームから送信されたデータを各変数に格納 5 $syouhin = $_POST["syouhin"]; 6 $model = $_POST["model"]; 7 $jyoutai = $_POST["jyoutai"]; 8 $file = $_POST["file"]; 9} 10?> 11 <div id="contact_form"> 12 <form action="confirm.php" method="post" name="form" onsubmit="return validate()"> 13 <input type="hidden" name="syouhin[0]" id="syouhin[0]" value="<?php echo $syouhin[0]; ?>"> 14 <input type="hidden" name="model[0]" id="model[0]" value="<?php echo $model[0]; ?>"> 15 <input type="hidden" name="jyoutai[0]" id="jyoutai[0]" value="<?php echo $jyoutai[0]; ?>"> 16 <input type="hidden" name="file[0]" id="file[0]" value="<?php echo $file[0]; ?>"> 17 <h1 class="contact-title">お問い合わせ 内容入力</h1> 18 <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> 19 <div> 20 <div> 21 <label>お名前<span>必須</span></label> 22 <input type="text" name="name" placeholder="例）山田太郎" value=""> 23 </div> 24 <div> 25 <label>ふりがな<span>必須</span></label> 26 <input type="text" name="furigana" placeholder="例）やまだたろう" value=""> 27 </div> 28 <div> 29 <label>メールアドレス<span>必須</span></label> 30 <input type="text" name="email" placeholder="例）guest@example.com" value=""> 31 </div> 32 <div> 33 <label>電話番号<span>必須</span></label> 34 <input type="text" name="tel" placeholder="例）0000000000" value=""> 35 </div> 36 <div> 37 <label>お問い合わせ内容<span>必須</span></label> 38 <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea> 39 </div> 40 </div> 41 <div class="button_con"> 42 <input type="button" value="内容を修正する" onclick="history.back(-1)"> 43 <button type="submit" name="send">確認画面へ</button> 44 </div> 45 </form> 46 </div>
確認画面（confirm.php）
php
1 <div id="contact_form"> 2 <form action="confirm.php" method="post" name="form"> 3 <input type="hidden" name="syouhin[0]" id="syouhin[0]" value="<?php echo $syouhin[0]; ?>"> 4 <input type="hidden" name="model[0]" id="model[0]" value="<?php echo $model[0]; ?>"> 5 <input type="hidden" name="jyoutai[0]" id="jyoutai[0]" value="<?php echo $jyoutai[0]; ?>"> 6 <input type="hidden" name="file[0]" id="file[0]" value="<?php echo $file[0]; ?>"> 7 <input type="hidden" name="name" value="<?php echo $name; ?>"> 8 <input type="hidden" name="furigana" value="<?php echo $furigana; ?>"> 9 <input type="hidden" name="email" value="<?php echo $email; ?>"> 10 <input type="hidden" name="tel" value="<?php echo $tel; ?>"> 11 <input type="hidden" name="content" value="<?php echo $content; ?>"> 12 <h1 class="contact-title">お問い合わせ 内容確認</h1> 13 <p>お問い合わせ内容はこちらで宜しいでしょうか？<br>よろしければ「送信する」ボタンを押して下さい。</p> 14 <div> 15 <div class="form-block" id="form_block[0]"> 16 <!-- Closeボタン --> 17 <span class="close" title="Close" style="display: none;">-</span> 18 <dl> 19 <dt><label class="confirm_dt">商品名</label></dt> 20 <dd><?php echo $syouhin[0]; ?></dd> 21 </dl> 22 <dl> 23 <dt><label class="confirm_dt">型番・モデル</label></dt> 24 <dd><?php echo $model[0]; ?></dd> 25 </dl> 26 <dl> 27 <dt><label class="confirm_dt">商品状態</label></dt> 28 <dd><?php echo $jyoutai[0]; ?></dd> 29 </dl> 30 <dl> 31 <dt><label class="confirm_dt">商品画像</label></dt> 32 <dd><?php echo $file[0]; ?></dd> 33 </dl> 34 </div> 35 <!-- Addボタン --> 36 <div class="form-block" id="form_add"> 37 <span class="add" title="Add">追加する</span> 38 </div> 39 40 <dl> 41 <dt><label class="confirm_dt">お名前</label></dt> 42 <dd><?php echo $name; ?></dd> 43 </dl> 44 <dl> 45 <dt><label class="confirm_dt">ふりがな</label></dt> 46 <dd><?php echo $furigana; ?></dd> 47 </dl> 48 <dl> 49 <dt><label class="confirm_dt">メールアドレス</label></dt> 50 <dd><?php echo $email; ?></dd> 51 </dl> 52 <dl> 53 <dt><label class="confirm_dt">電話番号</label></dt> 54 <dd><?php echo $tel; ?></dd> 55 </dl> 56 <dl> 57 <dt><label class="confirm_dt">お問い合わせ内容</label></dt> 58 <dd><?php echo nl2br($content); ?></dd> 59 </dl> 60 </div> 61 <div class="button_con"> 62 <input type="button" value="内容を修正する" onclick="history.back(-1)"> 63 <button type="submit" name="submit">送信する</button> 64 </div> 65 </form> 66 </div>
contact.js
js
1$(function() { 2 // フォームカウント 3 var frm_cnt = 0; 4 5 // clone object 6 $(document).on('click', 'span.add', function() { 7 var original = $('#form_block\[' + frm_cnt + '\]'); 8 var originCnt = frm_cnt; 9 var originVal = $("input[name='jyoutai\[" + frm_cnt + "\]']:checked").val(); 10 11 frm_cnt++; 12 13 original 14 .clone() 15 .hide() 16 .insertAfter(original) 17 .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。 18 .find("input[type='radio'][checked]").prop('checked', true) 19 .end() // 一度適用する 20 .find('input', 'textarea', 'dl').each(function(idx, obj) { 21 $(obj).attr({ 22 id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'), 23 name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']') 24 }); 25 $(obj).val(''); 26 }); 27 28 // clone取得 29 var clone = $('#form_block\[' + frm_cnt + '\]'); 30 clone.children('span.close').show(); 31 clone.slideDown('slow'); 32 33 // originalラジオボタン復元 34 original.find("input[name='jyoutai\[" + originCnt + "\]'][value='" + originVal + "']").prop('checked', true); 35 }); 36 37 // close object 38 $(document).on('click', 'span.close', function() { 39 var removeObj = $(this).parent(); 40 removeObj.fadeOut('fast', function() { 41 removeObj.remove(); 42 // 番号振り直し 43 frm_cnt = 0; 44 $(".form-block[id^='form_block']").each(function(index, formObj) { 45 if ($(formObj).attr('id') != 'form_block[0]') { 46 frm_cnt++; 47 $(formObj) 48 .attr('id', 'form_block[' + frm_cnt + ']') // id属性を変更。 49 .find('input', 'textarea').each(function(idx, obj) { 50 $(obj).attr({ 51 id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'), 52 name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']') 53 }); 54 }); 55 } 56 }); 57 }); 58 }); 59 60});
https://jsfiddle.net/Siskara/tpmgy43L/
上記ＵＲＬが参考サイトになります。
ただ参考サイトでは項目を追加する方法しか記載されておらず、あとは色々調べながらやっている感じです＞＜
どこまでは問題なく出来ているが、どこが具体的に詰まっている等、もう少し詳しく質問文内に追記していただけますか？
今、追記させていただきましたのでご確認お願い致します。
【補足】、【実装したいこと】を追加致しました。
加筆ありがとうございました。
1つずつ確認しながら進めていく必要があると思います。
まずは、追加した商品のidはちゃんと"form_block[1]" これがついているのかどうかを確認してみてください。
idを付与する処理より下のはコメントアウトでもして、とにかくまずはここまでを
あなたの回答
tips
プレビュー
