どのリスト要素がクリックされたかを追跡し、このデータをPHPに転送します

Question

クリックしたときに隠れた入力値を持つフォームを送信する一連のリスト項目を作成しようとしています。問題は、リストのインデックス番号をHTMLから抜き出し、これをPHPのロジックチェックに転送してリストの右側にクリックされた入力フィールドの名前を表示する方法を考えることができないことです。

<?php 
    $students = ['bob','paul'];  
?> 

<section id="tablet_container"> 

    <div class="upload-tableview-wrapper"> 

     <ul> 
      <form id="select_student" name="select_student" method='POST' action="<?php echo ($_SERVER['PHP_SELF']); ?>"> 
       <li><input type="hidden" name="student_firstname[]" value="<?php echo $students[0]; ?>"> 
        <?php echo $students[0];?> 
       </li> 
       <li><input type="hidden" name="student_firstname[]" value="<?php echo $students[1]; ?>"> 
        <?php echo $students[1];?> 
        <li> 
      </form> 
     </ul> 

     </div> 

<?php 
    if (isset($_POST['student_firstname'])) {  
?> 
    <div id="manual_student_container"> 
     <label id="label_student_first_name"> First Name:</label> 
     <input type="text" readonly name="student_first_name" id="student_first_name" value="<?php echo $_POST['student_firstname'][1]; ?>"> 
    </div> 
    </section> 
<?php 
    }  
?> 

Javascriptの-jquery

.upload-tableview-wrapper { 
    position:absolute; 
    height: 270px; 
    width: 200px; 
    top:60px; 
    left:80px; 
    box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075), 0px 1px 0px rgba(255, 255, 255, 0.75); 
    overflow: scroll; 
    background-color: black; 
} 

ul { 
    list-style-type:none; 
    font-family:"Helvetica"; 
    font-size:16px; 
    padding:0; 
} 

ul li { 
    background-color:#F7F7F7; 
    padding:14px 10px; 
    border-left:1px solid #B2B4B8; 
    border-right:1px solid #B2B4B8; 
    border-bottom:1px solid #CBCBCB; 
    border-top:1px solid #FDFDFD; 
    color:#385487; 
} 

ul li:hover { 
    color:white; 
    background-color: red; 
} 

Answer 1

Submit()フォーム用であり、自動的にHTMLにに設定されているものは何でも、フォームのアクションに提出する

$(document).ready(function() { 
    //colour selection rd and submit the form 
    $('li').click(function() { 
     $('li').css({ "background-color": "#F7F7F7" }); 
     $(this).css({ "background-color": "red" }); 

     var selectedStudent = $(this).text(); 

     // Remove saved data from sessionStorage 
     sessionStorage.removeItem('selectedStudent'); 
     //store the new value 
     sessionStorage.setItem('selectedStudent', selectedStudent); 

     $('#select_student').submit(); 
    }); 
}); 

CSS。 <form action="/action_page.php" method="post">

同様

あなたは、任意のPHPスクリプト/ページへの入力値を送信していますか？

---

編集： まあ、すべての最初は（必ずテキストを作る）は、実際に必要な値を取得します。私は安全のためだけに入力にval（）を使うことをお勧めします。

var selectedStudent=$(this).children('input').val();

Answer 2

あなたはあなたが表示されていないあなたが、その後$_POST['selected_student']