为何$_POST无法获取动态显示的输入框值？

原测试代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $("#elementreg").on("change", function() {
      var val = $(this).val();

      $('.types').hide(); //hide all
      $(`#${val}`).show(); //show by matching the selected value
    });
  });
</script>

<label for="How Many Chips">How Many Chips?:</label>

<select class="medium" id="elementreg" name="amount">
  <option value="" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
  <input name="First Chip ID">
  <input name="Second Chip ID">
</div>

<div class="types" id="3">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
</div>

<div class="types" id="4">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
  <input name="Fourth Chip ID">
</div>

问题分析 #

你遇到的$_POST获取值为空的问题，核心有两个原因：

• 缺少表单提交基础结构：你的代码没有包裹<form>标签，也没有提交按钮。HTML表单元素必须放在<form>内，通过提交操作才能将数据发送到PHP后台，否则PHP接收不到任何POST数据。
• 同名输入框值被覆盖：即使补上<form>，所有隐藏<div>里的输入框依然存在于DOM中，提交时会被一起发送。比如多个name="First Chip ID"的输入框，PHP的$_POST只会保留最后一个输入框的值——而隐藏的输入框是空的，最终会覆盖你填写的有效内容，导致拿到空值。

解决方法 #

步骤1：补上表单基础结构

将所有表单元素包裹在<form>标签中，指定提交方式和处理的PHP文件：

<form method="post" action="你的处理文件.php">
  <!-- 原有的select、div、input都放在这里 -->
  <button type="submit">提交</button>
</form>

步骤2：处理同名输入框问题（二选一即可）

方案A：动态生成输入框（推荐）

不需要预先写好所有div，根据用户选择的数量动态创建输入框，确保DOM中只有用户需要的输入框，避免同名冲突：

<script>
$(document).ready(function() {
  $("#elementreg").on("change", function() {
    var val = $(this).val();
    $("#chip-container").empty(); // 清空之前的输入框容器
    if(val) {
      // 循环创建对应数量的输入框
      for(var i=1; i<=val; i++) {
        $("#chip-container").append(`<input name="chip_${i}" placeholder="Chip ID ${i}">`);
      }
    }
  });
});
</script>

<label for="elementreg">How Many Chips?:</label>
<select class="medium" id="elementreg" name="amount">
  <option value="" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<!-- 存放动态生成的输入框 -->
<div id="chip-container"></div>

PHP端获取值示例：

$amount = $_POST['amount'] ?? 0;
for($i=1; $i<=$amount; $i++) {
  $chipId = $_POST["chip_{$i}"] ?? '';
  // 处理每个芯片ID的逻辑
}

方案B：给隐藏输入框添加disabled属性

保留原有div结构，隐藏div时将内部输入框设置为disabled（disabled的表单元素不会被提交），显示时移除disabled：

<script>
$(document).ready(function() {
  $("#elementreg").on("change", function() {
    var val = $(this).val();

    // 隐藏所有div并禁用内部输入框
    $('.types').hide().find('input').prop('disabled', true);
    if(val) {
      // 显示选中的div并启用内部输入框
      $(`#${val}`).show().find('input').prop('disabled', false);
    }
  });
});
</script>

同时给每个输入框设置唯一name（如name="chip1"、name="chip2"），PHP端直接通过唯一name获取值：

$chip1 = $_POST['chip1'] ?? '';
$chip2 = $_POST['chip2'] ?? '';
// 以此类推处理其他芯片ID

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