Pourquoi ne puis-je pas obtenir la valeur saisie depuis $_POST ?

Question

Avant-propos : je suis relativement nouveau en php et HTML, je m'excuse donc par avance s'il y a des problèmes de logique évidents. N'hésitez pas à le signaler.

J'ai actuellement une fonctionnalité de menu déroulant sur ma page HTML qui contient les valeurs 1 à 4. Après avoir sélectionné l'une des valeurs, le nombre correspondant de zones de texte « apparaîtra » sous le menu déroulant. Ce qui se passe réellement, c'est que lorsqu'une valeur numérique est enfoncée, la section contenant le nombre correspondant de zones de texte devient 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>

Lorsque j'essaie de récupérer et d'enregistrer la valeur d'un ID de puce dans une variable en PHP à l'aide de la fonction $_POST[""], la valeur de la variable est vide.

Par exemple, lorsque j'utilise le code suivant pour enregistrer le First Chip ID dans une variable et l'écrire dans un fichier, le fichier est vide.

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

Quelqu'un peut-il expliquer pourquoi ce comportement se produit ? Est-ce parce que j'ai initialisé « First Chip ID » et d'autres entrées plusieurs fois ? Toute aide pour identifier et résoudre ce problème serait grandement appréciée.

Answer 1

Tout d’abord, c’est une bonne idée d’utiliser des valeurs sans espaces pour les attributs id和name. Au moins pour JavaScript, cela facilite le référencement d'un élément.

Il est acceptable d'utiliser le même nom dans les éléments d'entrée. Activez-en un s'il est sélectionné dans le formulaire en utilisant <fieldset>元素，它具有一些内置功能可以使用。如果一个fieldset被禁用，子输入元素将不会被提交。因此，将所有fieldset禁用为起点，并根据amount. Pour masquer les ensembles de champs désactivés, vous pouvez utiliser CSS.

J'ai ajouté un écouteur d'événement pour l'événement de soumission afin que vous puissiez voir les données qui seront soumises. Vous pouvez utiliser la fonction PHP print_r($_POST) pour afficher toutes les données de publication dans la requête.

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>