PHP数组循环生成表单时，.val()仅返回第一行数据问题求助

你遇到的这个问题其实很常见，核心原因就是HTML中id属性的唯一性要求被违反了。

咱们仔细捋一捋：如果你的页面是通过循环（比如PHP的foreach）渲染多行记录，那每一行都会生成一个id为fnameupdate的输入框。但在HTML规则里，id是全局唯一的，绝对不能重复使用。当你用$('#fnameupdate').val()去取值时，jQuery（包括原生JS的getElementById）只会匹配到页面上第一个带有这个id的元素，所以不管你点哪一行的按钮，拿到的必然是第一行的内容。

接下来给你两种针对性的解决办法，根据你的实际场景选择就行：

场景1：页面循环渲染了多行记录（每条记录对应一个表单+按钮） #

这种情况下，我们需要放弃用id选择器，改用class，同时让按钮能精准关联到同一行的输入框：

修改后的PHP/HTML代码： #

<?php foreach ($your_record_array as $row): ?>
<!-- 给每一行加一个父容器，方便后续关联元素 -->
<div class="record-row">
  <form class="update_form">
    <div class="row">
      <div class="col">
        <label>Name</label>
        <!-- 去掉重复的id，保留class用于选择 -->
        <input type="text" name="fnameupdate" class="form-control fnameupdate" value="<?php echo $row['Firstname'] ?>" />
      </div>
    </div>
  </form>
  <button name="updaterecord" class="btn btn-success omhformupdate floatleft">
    <i class="material-icons floatleft">add_circle</i>
    <div>Update Appointment</div>
  </button>
</div>
<?php endforeach; ?>

修改后的JS代码： #

$(document).ready(function(){
  $('.omhformupdate').click(function(){
    // 通过closest找到当前按钮所在的行容器，再用find定位到对应的输入框
    var nameupdate = $(this).closest('.record-row').find('.fnameupdate').val();
    window.alert(nameupdate);
  });
});

场景2：页面只有一个表单，通过点击行来切换要更新的记录 #

这种情况下，我们只需要保持一个唯一的输入框，在点击行时把选中行的名称赋值给它即可：

先确保页面只有一个输入框（id唯一）： #

<form id="update_form">
  <div class="row">
    <div class="col">
      <label>Name</label>
      <input type="text" name="fnameupdate" id="fnameupdate" class="form-control" value="" />
    </div>
  </div>
</form>
<!-- 假设你的记录行是这样的，给每行加data属性存储名称 -->
<?php foreach ($your_record_array as $row): ?>
<div class="record-item" data-firstname="<?php echo $row['Firstname'] ?>">
  <!-- 行内容，比如显示名称等信息 -->
  <?php echo $row['Firstname'] ?>
</div>
<?php endforeach; ?>
<button name="updaterecord" id="updaterecord" class="btn btn-success omhformupdate floatleft">
  <i class="material-icons floatleft">add_circle</i>
  <div>Update Appointment</div>
</button>

补充行点击事件的JS： #

$(document).ready(function(){
  // 点击行时更新输入框的值
  $('.record-item').click(function(){
    var selectedName = $(this).data('firstname');
    $('#fnameupdate').val(selectedName);
  });

  // 按钮点击事件保持原来的即可
  $('.omhformupdate').click(function(){
    var nameupdate = $('#fnameupdate').val();
    window.alert(nameupdate);
  });
});

最后再提醒一句：以后写HTML一定要记住，id属性必须全局唯一，重复的id会导致各种DOM选择器的异常行为，踩过一次坑之后就再也别犯啦😉

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