為什麼無法從$_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>