javascript - 跟踪哪个列表元素被点击并将此数据传输到 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

 $(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

.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

您可以用选定的值填充隐藏的输入并提交表单

<input type="hidden" name="selected_student" id="selected_student" value="" />

<script>
$('li').click(function() 
{
    $('li').css({"background-color": "#F7F7F7"});
    $(this).css({"background-color": "red" });

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

    $('#selected_student').val(selectedStudent);
    $('#select_student').submit();
}  
</script>

然后您可以使用 $_POST['selected_student'] 在 PHP 中访问该值