jquery 为什么$_POST[“Name of Input”]不返回输入的值?

0aydgbwb  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(126)

我对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(); //hide all
      $(`#${val}`).show(); //show by matching the selected value
    });
  });
</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>

字符串
当我尝试检索任何芯片ID的值并使用$_POST[""]函数将其保存到PHP中的变量时,变量的值显示为空白。
例如,当我使用下面的代码将第一个芯片ID保存到一个变量并写入一个文件时,该文件显示为空白。

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


有人能解释一下为什么会出现这种行为吗?是因为我多次初始化“第一个芯片ID”和其他输入吗?任何和所有帮助认识和解决这个问题将不胜感激。

wwtsj6pe

wwtsj6pe1#

首先,最好同时使用idname属性的值而不使用空格。至少对于JavaScript来说,它使引用元素变得更容易。
可以对输入元素使用相同的名称。如果你在表单中使用<fieldset>元素,它有一些你可以使用的内置特性。如果字段集被禁用,则不会提交子输入元素。因此,禁用所有字段集作为状态点,并根据amount中选择的内容启用其中一个。要隐藏禁用的字段集,可以使用CSS。
我为submit事件添加了一个事件侦听器,这样您就可以看到将提交哪些数据。您可以使用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>

相关问题