为什么无法从$_POST获取输入的值？

Question

前言：我对php和HTML还比较新手，如果有任何明显的逻辑问题，我提前向大家道歉。请随时指出。

我目前在我的HTML页面上有一个下拉菜单的功能，其中包含值1-4。选择其中一个数值后，相应数量的文本框会“出现”在下拉菜单下方。实际上发生的是，当按下数值时，包含相应数量文本框的分区变为可见。

<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(); //隐藏所有
      $(`#${val}`).show(); //根据选择的值显示
    });
  });
</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[""]函数将任何芯片ID的值检索并保存到PHP中的变量时，该变量的值为空。

例如，当我使用以下代码将First Chip ID保存到变量并写入文件时，文件为空。

$FirstChipID = $_POST["First Chip ID"];

有人能解释一下为什么会出现这种行为吗？是因为我多次初始化了"First Chip ID"和其他输入吗？对于识别和解决此问题的任何帮助将不胜感激。

Answer 1

首先，使用没有空格的值作为id和name属性是一个好主意。至少对于JavaScript来说，这样更容易引用一个元素。

在输入元素中使用相同的名称是可以的。如果在表单中使用<fieldset>元素，它具有一些内置功能可以使用。如果一个fieldset被禁用，子输入元素将不会被提交。因此，将所有fieldset禁用为起点，并根据amount中选择的内容启用其中一个。要隐藏禁用的fieldset，可以使用CSS。

我为提交事件添加了一个事件监听器，这样您就可以看到将要提交的数据。您可以使用PHP函数print_r($_POST)来查看请求中的所有post数据。

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  switch(e.target.name){
    case 'amount':
      // disable all fieldsets
      form.querySelectorAll('fieldset').forEach(fs => fs.disabled = true);
      // enable the right fieldset
      form[`type_${e.target.value}`].disabled = false;
      break;
  }
});

// event listener is just for testing
document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data]);
});

form {
  display: flex;
  flex-direction: column;
}

fieldset[disabled] {
  display: none;
}

<form name="form01" method="POST">
  <label for="How Many Chips">
    <span>How Many Chips?:</span>
    <select class="medium" id="elementreg" name="amount" required>
      <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>
  </label>
  <fieldset name="type_1" disabled>
    <input name="chip_1" type="text" required>
  </fieldset>
  <fieldset name="type_2" disabled>
    <input name="chip_1" type="text" required>
    <input name="chip_2" type="text" required>
  </fieldset>
  <fieldset name="type_3" disabled>
    <input name="chip_1" type="text" required>
    <input name="chip_2" type="text" required>
    <input name="chip_3" type="text" required>
  </fieldset>
  <fieldset name="type_4" disabled>
    <input name="chip_1" type="text" required>
    <input name="chip_2" type="text" required>
    <input name="chip_3" type="text" required>
    <input name="chip_4" type="text" required>
  </fieldset>
  <label>
    <button type="submit">Submit</button>
  </label>
</form>