Why can't I get the entered value from $_POST?

Question

Preface: I am relatively new to PHP and HTML, so I apologize in advance if there are any obvious logic problems. Please feel free to point it out.

I currently have a drop down menu functionality on my HTML page that contains the values ​​1-4. After selecting one of the values, the corresponding number of text boxes will "appear" below the drop-down menu. What actually happens is that when a numeric value is pressed, the section containing the corresponding number of text boxes becomes visible.

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

When I try to retrieve and save the value of any chip ID to a variable in PHP using the $_POST[""] function, the value of the variable is empty.

For example, when I use the following code to save the First Chip ID to a variable and write it to a file, the file is empty.

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

Can anyone explain why this behavior occurs? Is it because I initialized "First Chip ID" and other inputs multiple times? Any help in identifying and resolving this issue would be greatly appreciated.

Answer 1

First of all, it is a good idea to use values ​​without spaces for the id and name attributes. At least for JavaScript, this makes it easier to reference an element.

It is OK to use the same name in input elements. If you use the <fieldset> element in a form, it has some built-in functionality that you can use. If a fieldset is disabled, child input elements will not be submitted. So disable all fieldsets as starting point and enable one of them based on what is selected in amount. To hide disabled fieldsets, you can use CSS.

I added an event listener for the submit event so you can see the data that will be submitted. You can use the PHP function print_r($_POST) to view all post data in the request.

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>