【サンプル動画あり】選択した画像src の情報をpostして、次ページで表示させる。Jquery

サンプル動画

流れ

１：index.php（テーブル選択画面）で、Jqueryでクリックした要素のsrcのパスを取得する

２：１で取得したパスを、

タグの、valueに入れて、postする。

３：form.php で、postされた画像パスを受け取り、表示させる。

ソースコード（抜粋）

index.php

# <!-- 画像パス　POST 用フォーム -->
<form id="contactForm" name="contactForm" method="post" action="form.php">

<input type="hidden" name="path" id="path">
<input id="send" class="Form-Btn02" type="submit" value="問い合わせ">

</form>

# Jquery クリックした要素の値を取得部分

$(function() {
    
    //============== ホワイトテーブル　色変え
    $("#sub_image li").eq(0).show();

   // === テーブルカラー選択
   $("#btn_01 li").click(function() {
        num = $("#btn_01 li").index(this);
        $("#sub_image li").hide();
        $("#sub_image li").eq(num).show();

       // 画像URLを取得　& valへ値セット
       targetSrc = $("#sub_image li img").eq(num).attr('src');
       $("input[name=path]").val(targetSrc);
            console.log(targetSrc);
       });
    

});

form.php

# ------（抜粋）------

# 画像パスの値を取得
$img_path = "";
if (isset($_POST['path'])) {
    $img_path = $_POST['path'];
}


# <!-- HTML 画像 表示部分　 -->
<p id="select_img">
                <span id="select_item">選択された商品</span>
                <img src="<?php print h($img_path); ?>">
</p>

■github （HTML などの記述は下記を参考ください。）