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

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

ただいまの
回答率

87.79%

phpでお問い合わせフォームの作成

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 437

score 18

前提・実現したいこと

お問い合わせフォームをphpで作成しております。
【構造について】
商品内容入力画面 → 個人情報入力画面 → 確認画面 → 送信完了画面
という構造です。
商品内容入力画面で複数の項目が入力された場合に確認画面でその商品情報を自動的に表示する方法を教えていただきたいです。
商品入力画面は項目の追加ボタンがありますが確認画面ではボタンを押し表示ではなく、
入力された項目の数だけ自動的に商品情報1、商品情報2という形で表示させたいです。
現状、商品情報1つと個人情報は確認画面で表示できます。

補足

商品情報「id="form_block[0]"」の内容は問題なく確認画面で表示されております。個人情報も表示されています。
「id="form_block[1]"」以降が確認画面へPOSTされません。

実装したいこと

商品情報の「追加する」ボタンをクリックすると「id="form_block[0]"」(商品情報1)が「id="form_block[1]"」(商品情報2)のように追加されていく仕様です。
その「id="form_block[1]"」(商品情報2)以降が入力されるとそれを自動的に確認画面で表示させたいです。

該当のソースコード

商品情報入力画面(input.php)

<?php
// フォームのボタンが押されたら
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // フォームから送信されたデータを各変数に格納
    $syouhin = $_POST["syouhin"];
    $model = $_POST["model"];
    $jyoutai = $_POST["jyoutai"];
    $file = $_POST["file"];
    $name = $_POST["name"];
    $furigana = $_POST["furigana"];
    $email = $_POST["email"];
    $tel = $_POST["tel"];
    $sex = $_POST["sex"];
    $item = $_POST["item"];
    $content  = $_POST["content"];
}
    <div id="contact_form">
        <form action="input2.php" method="post" name="form" onsubmit="return validate()">
            <h1 class="contact-title">商品内容入力</h1>
            <p>商品内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>

            <div class="form-block" id="form_block[0]">
                <!-- Closeボタン -->
                <span class="close" title="Close" style="display: none;">-</span>
                <dl>
                    <dt><label>商品名<span>必須</span></label></dt>
                    <dd><input type="text" name="syouhin[0]" id="syouhin[0]" placeholder="例)test" value=""></dd>
                </dl>
                <dl>
                    <dt><label>型番・モデル<span>必須</span></label></dt>
                    <dd><input type="text" name="model[0]" id="model[0]" placeholder="例)00000" value=""></dd>
                </dl>
                <dl>
                    <dt><label>商品状態<span>必須</span></label></dt>
                    <dd>
                        <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="新品"> 新品
                        <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="中古"> 中古
                        <input type="radio" name="jyoutai[0]" id="jyoutai[0]" value="故障"> 故障
                    </dd>
                </dl>
                <dl>
                    <dt><label>商品画像<span>必須</span></label></dt>
                    <dd><input type="file" name="file[0]" id="file[0]" value="" multiple></dd>
                </dl>
            </div>
            <!-- Addボタン -->
            <div class="form-block" id="form_add">
                <span class="add" title="Add">追加する</span>
            </div>
            <div class="button_con">
                <button type="submit" name="send" class="send_btn">個人情報入力画面へ</button>
            </div>
        </form>
    </div>

個人情報入力画面(input2.php)

<?php
// フォームのボタンが押されたら
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // フォームから送信されたデータを各変数に格納
    $syouhin = $_POST["syouhin"];
    $model = $_POST["model"];
    $jyoutai = $_POST["jyoutai"];
    $file = $_POST["file"];
}
?>
    <div id="contact_form">
        <form action="confirm.php" method="post" name="form" onsubmit="return validate()">
            <input type="hidden" name="syouhin[0]" id="syouhin[0]" value="<?php echo $syouhin[0]; ?>">
            <input type="hidden" name="model[0]" id="model[0]" value="<?php echo $model[0]; ?>">
            <input type="hidden" name="jyoutai[0]" id="jyoutai[0]" value="<?php echo $jyoutai[0]; ?>">
            <input type="hidden" name="file[0]" id="file[0]" value="<?php echo $file[0]; ?>">
            <h1 class="contact-title">お問い合わせ 内容入力</h1>
            <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>
            <div>
                <div>
                    <label>お名前<span>必須</span></label>
                    <input type="text" name="name" placeholder="例)山田太郎" value="">
                </div>
                <div>
                    <label>ふりがな<span>必須</span></label>
                    <input type="text" name="furigana" placeholder="例)やまだたろう" value="">
                </div>
                <div>
                    <label>メールアドレス<span>必須</span></label>
                    <input type="text" name="email" placeholder="例)guest@example.com" value="">
                </div>
                <div>
                    <label>電話番号<span>必須</span></label>
                    <input type="text" name="tel" placeholder="例)0000000000" value="">
                </div>
                <div>
                    <label>お問い合わせ内容<span>必須</span></label>
                    <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea>
                </div>
            </div>
            <div class="button_con">
            <input type="button" value="内容を修正する" onclick="history.back(-1)">
            <button type="submit" name="send">確認画面へ</button>
            </div>
        </form>
    </div>

確認画面(confirm.php)

    <div id="contact_form">
        <form action="confirm.php" method="post" name="form">
            <input type="hidden" name="syouhin[0]" id="syouhin[0]" value="<?php echo $syouhin[0]; ?>">
            <input type="hidden" name="model[0]" id="model[0]" value="<?php echo $model[0]; ?>">
            <input type="hidden" name="jyoutai[0]" id="jyoutai[0]" value="<?php echo $jyoutai[0]; ?>">
            <input type="hidden" name="file[0]" id="file[0]" value="<?php echo $file[0]; ?>">
            <input type="hidden" name="name" value="<?php echo $name; ?>">
            <input type="hidden" name="furigana" value="<?php echo $furigana; ?>">
            <input type="hidden" name="email" value="<?php echo $email; ?>">
            <input type="hidden" name="tel" value="<?php echo $tel; ?>">
            <input type="hidden" name="content" value="<?php echo $content; ?>">
            <h1 class="contact-title">お問い合わせ 内容確認</h1>
            <p>お問い合わせ内容はこちらで宜しいでしょうか?<br>よろしければ「送信する」ボタンを押して下さい。</p>
            <div>
                <div class="form-block" id="form_block[0]">
                        <!-- Closeボタン -->
    <span class="close" title="Close" style="display: none;">-</span>
                    <dl>
                        <dt><label class="confirm_dt">商品名</label></dt>
                        <dd><?php echo $syouhin[0]; ?></dd>
                    </dl>
                    <dl>
                        <dt><label class="confirm_dt">型番・モデル</label></dt>
                        <dd><?php echo $model[0]; ?></dd>
                    </dl>
                    <dl>
                        <dt><label class="confirm_dt">商品状態</label></dt>
                        <dd><?php echo $jyoutai[0]; ?></dd>
                    </dl>
                    <dl>
                        <dt><label class="confirm_dt">商品画像</label></dt>
                        <dd><?php echo $file[0]; ?></dd>
                    </dl>
                </div>
                                        <!-- Addボタン -->
            <div class="form-block" id="form_add">
                <span class="add" title="Add">追加する</span>
            </div>

                <dl>
                    <dt><label class="confirm_dt">お名前</label></dt>
                    <dd><?php echo $name; ?></dd>
                </dl>
                <dl>
                    <dt><label class="confirm_dt">ふりがな</label></dt>
                    <dd><?php echo $furigana; ?></dd>
                </dl>
                <dl>
                    <dt><label class="confirm_dt">メールアドレス</label></dt>
                    <dd><?php echo $email; ?></dd>
                </dl>
                <dl>
                    <dt><label class="confirm_dt">電話番号</label></dt>
                    <dd><?php echo $tel; ?></dd>
                </dl>
                <dl>
                    <dt><label class="confirm_dt">お問い合わせ内容</label></dt>
                    <dd><?php echo nl2br($content); ?></dd>
                </dl>
            </div>
            <div class="button_con">
                <input type="button" value="内容を修正する" onclick="history.back(-1)">
                <button type="submit" name="submit">送信する</button>
            </div>
        </form>
    </div>

contact.js

$(function() {
    // フォームカウント
    var frm_cnt = 0;

    // clone object
    $(document).on('click', 'span.add', function() {
        var original = $('#form_block\\[' + frm_cnt + '\\]');
        var originCnt = frm_cnt;
        var originVal = $("input[name='jyoutai\\[" + frm_cnt + "\\]']:checked").val();

        frm_cnt++;

        original
            .clone()
            .hide()
            .insertAfter(original)
            .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。
            .find("input[type='radio'][checked]").prop('checked', true)
            .end() // 一度適用する
            .find('input', 'textarea', 'dl').each(function(idx, obj) {
                $(obj).attr({
                    id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
                    name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
                });
                $(obj).val('');
            });

        // clone取得
        var clone = $('#form_block\\[' + frm_cnt + '\\]');
        clone.children('span.close').show();
        clone.slideDown('slow');

        // originalラジオボタン復元
        original.find("input[name='jyoutai\\[" + originCnt + "\\]'][value='" + originVal + "']").prop('checked', true);
    });

    // close object
    $(document).on('click', 'span.close', function() {
        var removeObj = $(this).parent();
        removeObj.fadeOut('fast', function() {
            removeObj.remove();
            // 番号振り直し
            frm_cnt = 0;
            $(".form-block[id^='form_block']").each(function(index, formObj) {
                if ($(formObj).attr('id') != 'form_block[0]') {
                    frm_cnt++;
                    $(formObj)
                        .attr('id', 'form_block[' + frm_cnt + ']') // id属性を変更。
                        .find('input', 'textarea').each(function(idx, obj) {
                            $(obj).attr({
                                id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
                                name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
                            });
                        });
                }
            });
        });
    });

});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mari.rinn

    2020/07/30 10:03

    どこまでは問題なく出来ているが、どこが具体的に詰まっている等、もう少し詳しく質問文内に追記していただけますか?

    キャンセル

  • GAKKY03

    2020/07/30 10:15

    今、追記させていただきましたのでご確認お願い致します。
    【補足】、【実装したいこと】を追加致しました。

    キャンセル

  • mari.rinn

    2020/07/30 16:58

    加筆ありがとうございました。
    1つずつ確認しながら進めていく必要があると思います。
    まずは、追加した商品のidはちゃんと"form_block[1]" これがついているのかどうかを確認してみてください。

    idを付与する処理より下のはコメントアウトでもして、とにかくまずはここまでを

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る