PHP循环内嵌Web表单提交时Ajax无法获取输入字段问题

你遇到的核心问题应该是PHP循环生成的表单存在重复元素标识或上下文冲突。因为循环里的表单结构完全一致，没有为每行的表单和输入字段添加唯一区分标记，导致浏览器处理第二行及以后的表单时，无法正确识别对应行的输入值，甚至会复用第一行的DOM元素数据。

下面给你两种针对性的解决方案：

方案1：为每行生成独立的表单模态框 #

在PHP循环中，把行的$id作为后缀，给模态框、输入字段的id和name添加唯一标识，确保每行的表单元素都是独一无二的：

<?php foreach($your_rows as $row): 
    $id = $row['id']; // 假设这是每行的唯一ID
?>
<!-- 每行的触发按钮，绑定对应ID的模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal-<?php echo $id; ?>">
  编辑行 <?php echo $id; ?>
</button>

<!-- 对应行的独立模态框表单 -->
<div class="modal fade" id="formModal-<?php echo $id; ?>" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="your-submit-url.php">
        <div class="modal-body">
          <div class="form-group">
            <input type="hidden" name="ID" value="<?php echo $id; ?>">
            <input type="text" class="form-control" id="eventInside-<?php echo $id; ?>" name="eventInside" placeholder="Name">
          </div>
          <div class="form-group">
            <input class="form-control sourceInside" id="sourceInside-<?php echo $id; ?>" type="url" name="sourceInside" placeholder="Type URL" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
<?php endforeach; ?>

方案2：复用单个模态框，动态填充数据（更高效） #

如果不想生成大量重复的模态框DOM，可以只做一个模态框，点击按钮时通过JS动态把当前行的ID和初始值填充到表单中，避免上下文冲突：

HTML部分 #

<?php foreach($your_rows as $row): 
    $id = $row['id'];
    $currentEvent = $row['event_name']; // 假设行内有初始名称
    $currentSource = $row['source_url']; // 假设行内有初始URL
?>
<button type="button" class="btn btn-primary edit-btn" 
        data-id="<?php echo $id; ?>"
        data-event="<?php echo htmlspecialchars($currentEvent); ?>"
        data-source="<?php echo htmlspecialchars($currentSource); ?>">
  编辑行 <?php echo $id; ?>
</button>
<?php endforeach; ?>

<!-- 唯一的通用模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="your-submit-url.php">
        <div class="modal-body">
          <div class="form-group">
            <input type="hidden" name="ID" id="modal-id">
            <input type="text" class="form-control" id="modal-eventInside" name="eventInside" placeholder="Name">
          </div>
          <div class="form-group">
            <input class="form-control sourceInside" id="modal-sourceInside" type="url" name="sourceInside" placeholder="Type URL" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

JS部分（jQuery示例） #

$(document).ready(function() {
    $('.edit-btn').click(function() {
        // 从按钮的data属性中获取当前行数据
        const rowId = $(this).data('id');
        const rowEvent = $(this).data('event');
        const rowSource = $(this).data('source');
        
        // 将数据填充到模态框表单
        $('#modal-id').val(rowId);
        $('#modal-eventInside').val(rowEvent);
        $('#modal-sourceInside').val(rowSource);
        
        // 打开模态框
        $('#formModal').modal('show');
    });
});

后端接收数据示例（PHP） #

如果用方案2，后端直接接收统一字段名即可：

if($_SERVER['REQUEST_METHOD'] === 'POST') {
    $id = $_POST['ID'];
    $eventName = $_POST['eventInside'];
    $sourceUrl = $_POST['sourceInside'];
    
    // 后续执行更新数据库等逻辑
}

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