Warum kann ich den eingegebenen Wert nicht von $_POST erhalten?

Question

Vorwort: Ich bin relativ neu in PHP und HTML, daher entschuldige ich mich im Voraus, falls es offensichtliche logische Probleme gibt. Bitte zögern Sie nicht, darauf hinzuweisen.

Ich habe derzeit auf meiner HTML-Seite eine Dropdown-Menüfunktion, die die Werte 1-4 enthält. Nach Auswahl eines der Werte „erscheint“ unterhalb des Dropdown-Menüs die entsprechende Anzahl an Textfeldern. Was tatsächlich passiert, ist, dass beim Drücken eines numerischen Werts der Abschnitt sichtbar wird, der die entsprechende Anzahl an Textfeldern enthält.

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

Wenn ich versuche, den Wert einer beliebigen Chip-ID mithilfe der Funktion $_POST[""] abzurufen und in einer Variablen in PHP zu speichern, ist der Wert der Variablen leer.

Wenn ich beispielsweise den folgenden Code verwende, um die First Chip ID in einer Variablen zu speichern und in eine Datei zu schreiben, ist die Datei leer.

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

Kann jemand erklären, warum dieses Verhalten auftritt? Liegt es daran, dass ich „First Chip ID“ und andere Eingaben mehrmals initialisiert habe? Wir würden uns über jede Hilfe bei der Identifizierung und Lösung dieses Problems sehr freuen.

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>