前言：我對php和HTML還比較新手，如果有任何明顯的邏輯問題，我提前向大家道歉。請隨時指出。
我目前在我的HTML頁面上有一個下拉菜單的功能，其中包含值1-4。選擇其中一個數值后，相應數量的文本框會“出現”在下拉菜單下方。實際上發(fā)生的是，當按下數值時，包含相應數量文本框的分區(qū)變?yōu)榭梢姟?/p>
<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>
當我嘗試使用$_POST[""]函數將任何芯片ID的值檢索并保存到PHP中的變量時，該變量的值為空。
例如，當我使用以下代碼將First Chip ID保存到變量并寫入文件時，文件為空。
$FirstChipID = $_POST["First Chip ID"];
有人能解釋一下為什么會出現這種行為嗎？是因為我多次初始化了"First Chip ID"和其他輸入嗎？對于識別和解決此問題的任何幫助將不勝感激。
1
0
0
首先，使用沒有空格的值作為id和name屬性是一個好主意。至少對于JavaScript來說，這樣更容易引用一個元素。
在輸入元素中使用相同的名稱是可以的。如果在表單中使用<fieldset>元素，它具有一些內置功能可以使用。如果一個fieldset被禁用，子輸入元素將不會被提交。因此，將所有fieldset禁用為起點，并根據amount中選擇的內容啟用其中一個。要隱藏禁用的fieldset，可以使用CSS。
我為提交事件添加了一個事件監(jiān)聽器，這樣您就可以看到將要提交的數據。您可以使用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>
