弹窗选中数据无法对应填充至5个表单输入框的技术求助

我开发了一款商品采购HTML表单，包含username、email、division code、department code、position五个字段。需求是勾选弹窗内的复选框并点击OK后，将选中行的对应数据分别填充到这五个输入框，但实际测试时所有输入框只显示username，其他字段无法正确填充，怀疑是JavaScript代码的问题。

原代码片段 #

HTML表单 #

<div class="form-group">
<label for="" ><r>* </r>Requestor Name :</label>
<a href="addRequestor" data-toggle="modal" data-target="#addRequestor">
<button class="form-control2" style="width: 7%">
<textarea rows="3" cols="40" class="form-control2" id="PRRqName" name="RequestName" required="true" placeholder=""> </textarea> </div>

 <br>
<div class="form-group">
<label for="" style="color: green;">Email Address :</label>
<input type="text" class="form-control2" name="RequestMail" id="PRRqMail" readonly value="" style="width: 60%; border-color: grey;">
</div>

<div class="form-group">
<label for="">Division :</label>
<input type="text" class="form-control2" name="RequestDivision" id="PRRqDivi" readonly value="" 
style="width: 60%; border-color: grey;">
</div>   

<div class="form-group">
<label for="">Department :</label>   
<input type="text" class="form-control2" name="RequestDept" id="PRRqDept" readonly value="" 
style="width: 60%; border-color: grey;">
</div>

<div class="form-group">
<label for="">Position :</label>   
<input type="text" class="form-control2" name="RequestPosi" id="PRRqPosi" readonly value="" 
style="width: 60%; border-color: grey;">
</div>

弹窗PHP代码 #

<div class="modal fade" id="addRequestor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document" style="min-width: 70%">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Requestor Name</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="modal-body">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h8 class="mb-4" style="color: black"><small> Choose the right Requestor Name</small></h8>
</div>

<div class="card-body align-items-center">
<div class="row no-gutters " >
<div class="table-responsive">
<table class="display table table-bordered table-sm" id="addRequestor" width="100%" cellspacing="0">
<thead style="background: #D5CE58">
<tr>
<th></th>
<th>Requestor Name</th>
<th>Email</th>
<th>Division Code</th>
<th>Department Code</th>
<th>Position</th>
</tr>
</thead>
<tbody id="download-forms-table-tbody">

<?php
$query = "SELECT [User].[Name], [User].[DiviCodeU], [User].[Position], [User].[Email], [Department].[DeptCode]
FROM [Department] JOIN [User] 
ON [Department].[DivCode] = [User].[DiviCodeU]";
$result=sqlsrv_query($conn, $query) or die("Couldn't execute query");
while ($data=sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))
 {
$Name= $data['Name'];
$Email= $data['Email'];
$DiviCodeU= $data['DiviCodeU'];
$DiviCode= $data['DeptCode'];
$Position= $data['Position'];
echo "<td><center><input type='checkbox' id='checkbox1' value ='$Name'/></center></td>";
echo "<td>$Name</td>";
echo "<td>$Email</td>";
echo "<td>$DiviCodeU</td>";
echo "<td>$DeptCode</td>";
echo "<td>$Position</td>";
echo "</tr>";
 }
?></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" id = "btnOkay1" data-dismiss="modal" style="width: 10%">OK</button>
<button class="btn btn-danger" type="button" data-dismiss="modal" style="width: 10%">Cancel</button>
</div>
</div>
</div>
</div>

原JavaScript代码 #

$(document).ready(function() {
     $("#btnOkay1").click(function(){
     var arr = []; 
     $.each($('input[id="checkbox1"]:checked'), function(){
     arr.push($(this).val());
     });

     document.getElementById("PRRqName").value += arr.join("; ");
     document.getElementById("PRRqMail").value += arr.join("; ");
     document.getElementById("PRRqDept").value += arr.join("; ");
     document.getElementById("PRRqDivi").value += arr.join("; ");
     document.getElementById("PRRqPosi").value += arr.join("; ");
     });
     });

问题分析 #

1. 复选框ID重复：循环生成的每行复选框都使用id="checkbox1"，违反HTML唯一ID规则，导致选择器无法精准定位。
2. 数据存储不足：复选框仅通过value存储了用户名，未携带其他字段数据，JS无法获取到email、部门等信息。
3. JS逻辑错误：所有输入框都赋值了同一个仅包含用户名的数组，未区分不同字段的对应数据。

解决方案 #

1. 修正PHP弹窗表格代码 #

• 将复选框的id改为class="requestor-checkbox"，避免ID重复。
• 给复选框添加data-*属性，存储该行所有字段的数据。
• 修正PHP变量错误：原代码中$DeptCode未定义，改为$DeptCode = $data['DeptCode']。
• 补全<tr>标签，原代码循环时漏掉了开头的<tr>。

修改后的PHP循环代码：

while ($data=sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))
 {
$Name= $data['Name'];
$Email= $data['Email'];
$DiviCodeU= $data['DiviCodeU'];
$DeptCode= $data['DeptCode'];
$Position= $data['Position'];
echo "<tr>";
echo "<td><center><input type='checkbox' class='requestor-checkbox' 
       data-name='$Name' 
       data-email='$Email' 
       data-division='$DiviCodeU' 
       data-department='$DeptCode' 
       data-position='$Position'
       value='$Name'/></center></td>";
echo "<td>$Name</td>";
echo "<td>$Email</td>";
echo "<td>$DiviCodeU</td>";
echo "<td>$DeptCode</td>";
echo "<td>$Position</td>";
echo "</tr>";
}

2. 修正JavaScript代码 #

• 使用class选择器.requestor-checkbox:checked遍历选中项。
• 从每个复选框的data-*属性中提取对应字段数据，分别存入不同数组。
• 将各数组的值填充到对应的输入框中，支持多选（用分号分隔）。

修改后的JS代码：

$(document).ready(function() {
    $("#btnOkay1").click(function(){
        let names = [], emails = [], divisions = [], departments = [], positions = [];
        
        $.each($('.requestor-checkbox:checked'), function(){
            let $checkbox = $(this);
            names.push($checkbox.data('name'));
            emails.push($checkbox.data('email'));
            divisions.push($checkbox.data('division'));
            departments.push($checkbox.data('department'));
            positions.push($checkbox.data('position'));
        });

        $('#PRRqName').val(names.join('; '));
        $('#PRRqMail').val(emails.join('; '));
        $('#PRRqDivi').val(divisions.join('; '));
        $('#PRRqDept').val(departments.join('; '));
        $('#PRRqPosi').val(positions.join('; '));
    });
});

3. 修正HTML表单的标签嵌套问题 #

原HTML中button和a标签未闭合，且textarea嵌套错误，修正后：

<div class="form-group">
    <label for=""><r>* </r>Requestor Name :</label>
    <a href="addRequestor" data-toggle="modal" data-target="#addRequestor">
        <button class="form-control2" style="width: 7%">选择</button>
    </a>
    <textarea rows="3" cols="40" class="form-control2" id="PRRqName" name="RequestName" required="true" placeholder=""></textarea>
</div>

内容的提问来源于stack exchange，提问作者Noor Hidayah