Mengapa saya tidak boleh mendapatkan nilai yang dimasukkan daripada $_POST?

Question

Kata Pengantar: Saya agak baru dalam php dan HTML, jadi saya memohon maaf terlebih dahulu jika terdapat sebarang masalah logik yang jelas. Sila berasa bebas untuk menunjukkannya.

Saya kini mempunyai fungsi menu lungsur turun pada halaman HTML saya yang mengandungi nilai 1-4. Selepas memilih salah satu nilai, bilangan kotak teks yang sepadan akan "muncul" di bawah menu lungsur. Apa yang sebenarnya berlaku ialah apabila nilai berangka ditekan, bahagian yang mengandungi bilangan kotak teks yang sepadan akan kelihatan.

<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>

Apabila saya cuba mendapatkan semula dan menyimpan nilai mana-mana ID cip kepada pembolehubah dalam PHP menggunakan fungsi $_POST[""], nilai pembolehubah itu kosong.

Sebagai contoh, apabila saya menggunakan kod berikut untuk menyimpan ID Cip Pertama pada pembolehubah dan menulisnya pada fail, fail itu kosong.

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

Bolehkah sesiapa menjelaskan mengapa tingkah laku ini berlaku? Adakah kerana saya memulakan "ID Cip Pertama" dan input lain beberapa kali? Sebarang bantuan dalam mengenal pasti dan menyelesaikan isu ini amat dihargai.

Answer 1

Pertama sekali, adalah idea yang baik untuk menggunakan nilai tanpa ruang untuk id和name atribut. Sekurang-kurangnya untuk JavaScript, ini memudahkan untuk merujuk elemen.

Adalah OK untuk menggunakan nama yang sama dalam elemen input. Dayakan salah satu daripada ini jika dipilih dalam borang menggunakan <fieldset>元素，它具有一些内置功能可以使用。如果一个fieldset被禁用，子输入元素将不会被提交。因此，将所有fieldset禁用为起点，并根据amount. Untuk menyembunyikan set medan yang dilumpuhkan, anda boleh menggunakan CSS.

Saya menambah pendengar acara untuk acara serah supaya anda boleh melihat data yang akan diserahkan. Anda boleh menggunakan fungsi PHP print_r($_POST) untuk melihat semua data siaran dalam permintaan.

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>