inputのradioを選択し送信する前にvalueの値を取得する方法

Question

前提

予約システムを作っています。
スタッフを選択するとそのスタッフidの値を受け取ってその値によって予約日時を取得するSQL文の条件変更したいのですが、どのように考えれば良いのか詰まってしまいました。アドバイスをいただきたいです。

現在は
①メニューを選択
↓
②日時を選択（ここでSQLを使い既に予約が入っている日時を照合して日時を表示させています）
↓
③連絡先などを入力
↓
④送信
という流れなのですが、①メニューを選択の前にスタッフ選択を追加して
②日時を選択のSQLの条件にスタッフidを追加し、そのスタッフidを次のページへ送信したいです。

実現したいこと

• inputのvalue値をラジオボタンを選択すると同時に受け取ってその値を変数に代入する
• inputのvalue値では受け取れない場合、他の方法を教えていただきたいです

該当のソースコード

全体（一部抜粋）

<?php
$files = getAllFile( $shop_id );
?>
<main>
<form method="POST" action="../common/3.0.1/check.php">
<!-- ↓↓スタッフ選択↓↓ -->
<section class="area staff cf">
<div class="title">
<h3><span>Step1</span>スタッフを選ぶ</h3>
</div>
<div class="contentWrap">
<div class="staffitem">
<?php foreach($files as $file):?>
<ul class="radio-select">
<li>
<input type="radio" id="radio-01" value="<?php echo $file['image_id']?>" name="staff">
<label for="radio-01"><?php echo $file['staff_name'];?></label>
</li>
</ul>
<?php endforeach;?>
</div>
</div>
</section>
<!-- ↑↑スタッフ選択↑↑ --> 
<!-- ↓↓料金選択↓↓ -->
<section class="area rate-plan cf">
<div class="title">
<h3><span>Step2</span>料金を選ぶ</h3>
</div>
<div class="contentWrap">
<table>
<tbody>
<!--料金<tr>開始-->
<?php
for ( $i = 0; $i < count( $arry ); $i++ ) {
  $menuName = $arry[ $i ][ 'menuName' ];
  $menuUrl = $arry[ $i ][ 'menuUrl' ];
  ?>
<tr>
<th scope="row" class="cf"><img src="../../img/photo/common<?php echo $menuUrl; ?>" alt=""/><?php echo $menuName; ?></th>
<?php
for ( $j = 0; $j < count( $arry[ $i ][ 'menuContents' ] ); $j++ ) {
  $send = $arry[ $i ][ 'menuContents' ][ $j ][ 'send' ];
  $id = $arry[ $i ][ 'menuContents' ][ $j ][ 'ID' ];
  $text = $arry[ $i ][ 'menuContents' ][ $j ][ 'text' ];
  $time = $arry[ $i ][ 'menuContents' ][ $j ][ 'time' ];
  ?>
<td><input type="radio" name="menu" value="<?php echo $send; ?>" id="radio<?php echo $id;?>" class="<?php echo $time; ?>"　<?php  if (isset($menu) && $menu == "$send") echo "checked";?>/>
<label for="radio<?php echo $id;?>" class="radio"><?php echo $text; ?></label></td>
<?php }?>
</tr>
<?php }?>
<!--料金<tr>終了-->
</tbody>
</table>
<p class="note"><?php echo $menuNote; ?></p>
</div>
</section>
<!-- ↑↑料金選択↑↑ --> 
<!-- ↓↓日時選択↓↓-->
<section class="area dayTime cf">
<div class="title">
<h3><span>Step3</span>日時を選ぶ</h3>
</div>
<div class="contentWrap">
<div class="dayForm">
<table>
<th class="no">時間</th>
<th> <?php echo $todayFmt1; ?>（<?php echo $week[ $todayWeek ];?>）<br>
<?php
if ( in_array( $week[ $todayWeek ], $closed ) ) {
  echo "<span>定休日</span>";
} elseif ( in_array( $today, $closedDay ) ) {
  echo "<span>休業日</span>";
} else {
  echo "&nbsp;";
}
?></th>
<th> <?php echo $tomorrowFmt1; ?>（<?php echo $week[ $tomorrowWeek ];?>）<br>
<?php
if ( in_array( $week[ $tomorrowWeek ], $closed ) ) {
  echo "<span>定休日</span>";
} elseif ( in_array( $tomorrow, $closedDay ) ) {
  echo "<span>休業日</span>";
} else {
  echo "&nbsp;";
}
?></th>
<th> <?php echo $inTwoDaysFmt1; ?>（<?php echo $week[ $inTwoDaysWeek ];?>）<br>
<?php
if ( in_array( $week[ $inTwoDaysWeek ], $closed ) ) {
  echo "<span>【定休日】</span>";
} elseif ( in_array( $inTwoDays, $closedDay ) ) {
  echo "<span>休業日</span>";
} else {
  echo "&nbsp;";
}
?></th>
<?php
foreach ( $daterange as $date ) {
  $time = $date->format( "H:i:s" );
  $timeMin = $date->format( "H:i" );
  //日時（今日）
  $variable = $today . ' ' . $time;
  $endTime = date( "H:i:s", strtotime( $time . "+15 minute" ) );
  $variableEnd = $today . ' ' . $endTime;
  //echo "今日".$variable."/".$endTime."/".$variableEnd;
  //日時（明日）
  $variable2 = $tomorrow . ' ' . $time;
  $endTime2 = date( "H:i:s", strtotime( $time . "+15 minute" ) );
  $variableEnd2 = $tomorrow . ' ' . $endTime2;
  //echo "明日".$variable2."/".$endTime2."/".$variableEnd2;
  //日時（明後日）
  $variable3 = $inTwoDays . ' ' . $time;
  $endTime3 = date( "H:i:s", strtotime( $time . "+15 minute" ) );
  $variableEnd3 = $inTwoDays . ' ' . $endTime3;
  //echo "明後日".$variable3."/".$endTime3."/".$variableEnd3;
  ?>
<tr class='day_table'>
<td class="time"><?php echo $timeMin; ?></td>
<!--今日-->
<td><input type='radio' name='day' id='<?php echo $variable; ?>' value='<?php echo $variable; ?>'
        <?php
        //データーベースから呼び出す
        $sql = "SELECT 
                  count(*) 
                FROM 
                  customer3
                WHERE 
                  shop_id = ".$shop_id." 
                AND 
                  reserve_day = '".$today."' 
                AND (start_time < '".$variableEnd."' AND end_time >= '".$variable."')";

        $stmt = $dbh->query($sql);
        $num = $stmt->fetchColumn();
        
        if ( in_array( $week[ $todayWeek ], $closed ) || in_array( $today, $closedDay )) {
            echo 'disabled';
        }elseif ( in_array( $today." ".$timeMin, (array)$breakTime ) ) {
            echo 'disabled';
        }elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) {
            echo 'disabled';
        }elseif($time <= $HalfAnHour ){
            echo 'disabled';
        }elseif($num >= $reservFrame){
            echo 'disabled class="first-disabled"';
        }
        ?>>
<label for='<?php echo $variable;?>'>
<?php
if ( in_array( $week[ $todayWeek ], $closed ) || in_array( $today, $closedDay ) ) {
  echo "<i class='fas fa-minus'></i>";
} elseif ( strtotime( date( 'H:i' ) ) > strtotime( $timeMin ) ) {
  echo "<i class='fas fa-minus'></i>";
} elseif ( in_array( $today . " " . $timeMin, ( array )$breakTime ) ) {
  echo "<i class='fas fa-minus'></i>";
} elseif ( $num >= $reservFrame ) {
  /*echo "予約済";*/
  echo "<span class='mark'>×</span>"; //×
} elseif ( $time <= $HalfAnHour ) {
  echo "TEL";
} else {
  echo "<span class='result1'></span>";
  /*echo '<span class="mark2">●</span>';*/
}
?>
</label></td>
<!--明日-->
<td><input type='radio' name='day' id='<?php echo $variable2; ?>' value='<?php echo $variable2; ?>'
        <?php
        //データーベースから呼び出す
        $sql = "
            SELECT 
              count(*) 
            FROM 
              customer3
            WHERE 
              shop_id = ".$shop_id."
            AND 
              reserve_day = '".$tomorrow."' 
            AND
              (start_time <'".$variableEnd2."' AND end_time >= '".$variable2."') 
            ";

        $stmt = $dbh->query($sql);
        $num2 = $stmt->fetchColumn();
        
        if (in_array( $week[ $tomorrowWeek ], $closed ) || in_array( $tomorrow, $closedDay )) {
            echo 'disabled';
        }elseif($num2 >= $reservFrame){
            echo 'disabled class="first-disabled"';
        }elseif ( in_array( $tomorrow." ".$timeMin, (array)$breakTime ) ) {
            echo 'disabled';
        }
        ?>>
<label for='<?php echo $variable2;?>'>
<?php
if ( in_array( $week[ $tomorrowWeek ], $closed ) || in_array( $tomorrow, $closedDay ) ) {
  echo "<i class='fas fa-minus'></i>";
} elseif ( $num2 >= $reservFrame ) {
  /*echo "予約済";*/
  echo "<span class='mark'>×</span>"; //×
} elseif ( in_array( $tomorrow . " " . $timeMin, ( array )$breakTime ) ) {
  echo "<i class='fas fa-minus'></i>";
} else {
  echo "<span class='result1'></span>";
  /*echo '<span class="mark2">●</span>';*/
}
?>
</label></td>
<!--明後日-->
<td><input type='radio' name='day' id='<?php echo $variable3; ?>' value='<?php echo $variable3; ?>'
        <?php
        //データーベースから呼び出す
        $sql = "
            SELECT 
              count(*) 
            FROM 
              customer3 
            WHERE 
              shop_id = ".$shop_id."
            AND 
              reserve_day = '".$inTwoDays."' 
            AND
              (start_time <'".$variableEnd3."' AND end_time >= '".$variable3."') 
            ";

        $stmt = $dbh->query($sql);
        $num3 = $stmt->fetchColumn();
        
        if (in_array( $week[ $inTwoDaysWeek ], $closed) || in_array( $inTwoDays, $closedDay)) {
            echo 'disabled';
        }elseif($num3 >= $reservFrame){
            echo 'disabled class="first-disabled"';
        }elseif ( in_array( $inTwoDays." ".$timeMin, (array)$breakTime ) ) {
            echo 'disabled';
        }
        ?>>
<label for='<?php echo $variable3;?>'>
<?php
if ( in_array( $week[ $inTwoDaysWeek ], $closed ) || in_array( $inTwoDays, $closedDay ) ) {
  echo "<i class='fas fa-minus'></i>";
} elseif ( $num3 >= $reservFrame ) {
  /*echo "予約済";*/
  echo "<span class='mark'>×</span>"; //×
} elseif ( in_array( $inTwoDays . " " . $timeMin, ( array )$breakTime ) ) {
  echo "<i class='fas fa-minus'></i>";
} else {
  echo "<span class='result1'></span>";
  /*echo '<span class="mark2">●</span>';*/
}
?>
</label></td>
</tr>
<?php }?>
</table>
</div>
</div>
</section>
<!-- ↑↑日時選択↑↑--> 
<!-- ↓↓送信ボタン↓↓-->
<div class="cp_submit">
<input type="hidden" name="shop_id" value="<?php echo $shop_id; ?>">
<input type="hidden" name="shop_name" value="<?php echo $shop_name; ?>">
<input type="hidden" name="shop_url" value="<?php echo $shop_url; ?>">
<input type="hidden" name="shop_tel" value="<?php echo $shop_tel; ?>">
<input type="hidden" name="shop_mail" value="<?php echo $shop_mail; ?>">
<input type="hidden" name="temporary" value="<?php echo $temporary; ?>">
<input type="hidden" name="bg" value="<?php echo $bg; ?>">
<input type="submit" value="確認画面へ" class="submit_a1"/>
</div>
<!-- ↑↑送信ボタン↑↑--> 
</form>

試したこと

最初は
inputではなく<a>タグを使って値をパラメータを使って同じページに送信し値を受け取ろうと考えたのですが、、うまくいきませんでした。

Comments

[m.ts10806]

コードはもっと全容があったほうが良いです。

本件と直接は関係ないですが、
IDは画面内に1つというHTMLのルールがあるので、そのあたりを配慮しておかないと
JavaScriptなどで正しく要素を扱えなくなります。

※nameがないのでそもそもどのように送信させようとしているのか見えない部分もありますが

[emi_ono]

ご指摘ありがとうございます。
コードの全体を追加しました。
またnameを忘れていました。こちらも追加しました。

Answer 1

jsで取得した値でSQL文を変更するのは難しそうなので、パラメーターを使ってvalue値を取得しSQL文を変更する事で実現しました。
ありがとうございます。

Answer 2

＞ input type="radio" id="radio-01"

idを振った要素をループして設定することはできません（idは同ページ内でユニークに設定が必要）

質問内容がよくわからないのですが、選択されたラジオボタンの値をjsで得たいなら
document.querySelector('[type=radio]:checked').value
を参照してください

Comments

[emi_ono]

ありがとうございます。

>document.querySelector('[type=radio]:checked').valueを参照してください

参考サイトを見つける事ができました。

> input type="radio" id="radio-01"

id部分は削除しました。

見つけたサイトを参考に（https://pisuke-code.com/js-way-to-get-radio-group-value/）ラジオボタンの値を取得する事ができました。

<script>
window.addEventListener('load', function(){
const radioGroup = document.getElementById('sweetGroup');

/// ラジオのクリックイベントを取得
radioGroup.addEventListener('click', function(){
/// 選択された値とか要素内テキスト取得
var radio = document.querySelector('[name="staff"]:checked');
var val = radio.value;
/// ラジオグループ下にそれらを表示
var elemShowSweet = document.getElementById('showSweet');
elemShowSweet.innerHTML = val;
});
});
</script>
ここで取得したelemShowSweet.innerHTML = val;部分を
新たに
<div id="showSweet">
<!-- ここに選択値とか表示 -->
</div>
追加しここに表示させる事はできたのですが、

$sql = "SELECT
count(*)
FROM
customer3
WHERE
shop_id = ".$shop_id."
AND
reserve_day = '".$today."'
AND (start_time < '".$variableEnd."' AND end_time >= '".$variable."')";

の where句に
shop_id = ".$shop_id." かつ image_id = 0 または image_id = 「取得した値」
としたいのですが、どのように書けば良いでしょうか。sql文の中に書くのは難しいでしょうか。

[emi_ono]

jsで取得した値でSQL文を変更するのは難しそうなので、パラメーターを使ってvalue値を取得する事にしました。
回答してくださり、ありがとうございました。