그누보드 QA - php에서 라디오 버튼 값을 페이지 이동 없이 php로 받기

php에서 라디오 버튼 값을 페이지 이동 없이 php로 받기

Sssuj 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.07.08 14:09:22 조회 1686 (211.♡.♡.254)

본문

3553444094_1625720580.3987.png

현재 구현하려는 내용이 대회 리스트에서 라디오 버튼으로 항목을 선택하면 그 항목에 맞춰 타이틀 리스트 내용을 DB에서 가져와 변경되는 기능을 구현하려 합니다.

그런데 php에서 라디오 버튼의 값을 페이지 이동없이 받으려면 자바스크립트를 이용해야 하고 자바스크립트 함수 안에 있는 변수를 php 변수로 변경하지 못한다고 하여 현재 어떻게 구현해야 할지 정말 모르겠습니다.

제가 구현하려는 내용에서 라디오 버튼을 사용하는 것 자체가 말이 안되는 것인지 아니면 다른 방법이 있는지 알려주세요...ㅠㅠ 어떤 기능을 사용해야 사용자가 선택한 항목에 맞춰 다른 테이블의 내용을 변경할 수 있는건가요....

현재 php 코드입니다.


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
      body {
         margin: 0px;
         margin-top: 40px;
      }
      table.titleTable {
        border-collapse: collapse;
        text-align: left;
        line-height: 0.5;
      }
      table.titleTable thead th {
        padding: 10px;
        font-weight: bold;
        vertical-align: top;
        color: #fff;
        background: #3D676A;      
      }
      table.titleTable tbody th {
        width: 30px;
        padding: 0 0 0 10px;
      }
      table.titleTable td {
        width: 30px;
        padding: 10px;
        vertical-align: top;
      }
      table.titleTable .even {
        background: #CEECF7;
      }
      table.titleTable .h {
        background: #fff;
      }
      table.titleTable .tableTop {
         position: sticky;
         top: 0px;
      }
      table.titleTable .radio_r {
         text-align: right;
         box-sizing: border-box;
         height: 30px;
      }
      form.titleForm {
         margin: 10px;
         padding: 10px 0 0 0;
         background: #8FAE80;
         box-shadow: 5px 5px 5px gray;
      }
      .explanation {
         text-align: left;
         margin: 0 0 5px 15px;
      }
      .filebox {
         width: 200px;
         height: 300px;
         margin-bottom: 20px;
         padding: 10px 30px;
         background-color: #97CFDC;
         box-shadow: 5px 5px 5px gray;
      }
      .nav_tori {
        height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        background-color: skyblue;
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        top: 0;
        z-index: 10
      }
      .button {
         border-radius: 5px;
        border: 2px solid rgba(121, 121, 121, 0.2);
        background-color: #e8f4ef;
        height: 35px;
        width: 80px;
        margin: 5px 0 0 0;
      }
      .button:hover {
        background-color: #bee0d2;
      }
      .button:active {
        background-color: #a8dbc6;
      }
   </style>
   <script src="//code.jquery.com/jquery.min.js"></script>
   <script>
      function sendTitle(form){
         for(var i = 0; i < form.check.length; i++){
            if(form.check[i].checked){
               var out = form.check.value;
               $.ajax({
            type : "GET",
            url : "getTitle4.php",
            data: {out},
            dataType : "text",
         });
               break;
            }
         }
         
      }
      
   </script>
</head>
<body>
   <div class="nav_tori">
      <span>Tori</span>
      <span>Date</span>
   </div>
   <div class="explanation">대회를 선택해주세요.</div>
   <form name="titleForm" class="titleForm" method="post" action="getTitle4_test.php" style="width:450px; height:310px;">
      <center>
      
   <div style="width:440px; height:300px; overflow:auto; display: block;">
      <table class="titleTable" width="420">
         <thead>
         <tr class="tableTop">
            <th scope="cols">대회 리스트</th>
            <th scope="cols"></th>
         </tr>
         </thead>
         <tbody>
<?php
   $conn = mysqli_connect("localhost", "lsj", "1234" , "phptest");
   $sql = "SELECT id, passwd FROM member";
   $result = mysqli_query($conn, $sql);
   $cnt = 0; //타이틀 행 갯수
   if (mysqli_num_rows($result) > 0){
   while ($row = mysqli_fetch_array($result)){
      if($cnt%2==0){ //cnt가 짝수인 경우 배경을 흰색으로
         ?>
            <tr>
               <th scope="row" class="h"><?=$row[0]?></th>
               <th class="h radio_r"><input type="radio" name="check" id="check" value="<?= $cnt ?>"/></th>
            </tr>
         <?php
      }else{
         ?>
            <tr>
               <th scope="row" class="even"><?=$row[0]?></th>
               <th class="even radio_r"><input type="radio" name="check" id="check" value="<?= $cnt ?>"/></th>
            </tr>
         <?php
      }
      $cnt++;
?>
<?php
   }
   }else{
   echo "테이블에 데이터가 없습니다.";
   }
   mysqli_close($conn); // 디비 접속 닫기
?>
           </tbody>
         </table>
      </div>
      <p><input type="submit" value="선택완료" class="button" onclick="sendTitle(this.form);"></p>
      </center>
   </form>

   <br><br><br>

   <div class="explanation">타이틀을 선택해주세요.</div>
   <form name="titleForm" class="titleForm" method="post" action="mergeIMG.php" style="width:450px; height:310px;">
      <center>
      
   <div style="width:440px; height:300px; overflow:auto; display: block;">
      <table class="titleTable" width="420">
         <thead>
         <tr class="tableTop">
            <th scope="cols">타이틀 리스트</th>
            <th scope="cols"></th>
         </tr>
         </thead>
         <tbody>
<?php
   $conn = mysqli_connect("localhost", "lsj", "1234" , "phptest");
   $sql = "SELECT id, passwd FROM member";
   $result = mysqli_query($conn, $sql);
   $cnt = 0; //타이틀 행 갯수
   if (mysqli_num_rows($result) > 0){
   while ($row = mysqli_fetch_array($result)){
      if($cnt%2==0){ //cnt가 짝수인 경우 배경을 흰색으로
         ?>
            <tr>
               <th scope="row" class="h"><?=$row[0]?></th>
               <th class="h radio_r"><input type="radio" name="check" value="<?= $cnt ?>"/></th>
            </tr>
         <?php
      }else{
         ?>
            <tr>
               <th scope="row" class="even"><?=$row[0]?></th>
               <th class="even radio_r"><input type="radio" name="check" value="<?= $cnt ?>"/></th>
            </tr>
         <?php
      }
      $cnt++;
?>
<?php
   }
   }else{
   echo "테이블에 데이터가 없습니다.";
   }
   mysqli_close($conn); // 디비 접속 닫기
?>
           </tbody>
         </table>
      </div>
      <p><input type="submit" value="선택완료" class="button"></p>
      </center>
      
   </form>
   
   <br><br><br>
   <div class="filebox">
      <div class="file-upload preview-image">
         <p>왼쪽에 삽입할 이미지를 선택해주세요.<br></p>
         <input type="file" id="input-file" accept="image/*"> 
      </div>
   </div>
      
</body>
</html>