前言：我對(duì)php和HTML還比較新手，如果有任何明顯的邏輯問(wèn)題，我先向大家道歉。請(qǐng)隨時(shí)指出。
我目前在我的HTML頁(yè)面上有一個(gè)下拉式選單的功能，其中包含值1-4。選擇其中一個(gè)數(shù)值後，對(duì)應(yīng)數(shù)量的文字方塊會(huì)「出現(xiàn)」在下拉式選單下方。實(shí)際上發(fā)生的是，當(dāng)按下數(shù)值時(shí)，包含相應(yīng)數(shù)量文字方塊的分區(qū)變?yōu)榭梢?jiàn)。
<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(); //根據(jù)選擇的值顯示
});
});
</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>
當(dāng)我嘗試使用$_POST[""]函數(shù)將任何晶片ID的值檢索並保存到PHP中的變數(shù)時(shí)，該變數(shù)的值為空。
例如，當(dāng)我使用以下程式碼將First Chip ID儲(chǔ)存到變數(shù)並寫(xiě)入檔案時(shí)，檔案為空。
$FirstChipID = $_POST["First Chip ID"];
有人能解釋為什麼會(huì)出現(xiàn)這種行為嗎？是因?yàn)槲叶啻纬跏蓟?First Chip ID"和其他輸入嗎？對(duì)於識(shí)別和解決此問(wèn)題的任何幫助將不勝感激。
1
0
0
首先，使用沒(méi)有空格的值作為id和name屬性是個(gè)好主意。至少對(duì)於JavaScript來(lái)說(shuō)，這樣比較容易引用一個(gè)元素。
在輸入元素中使用相同的名稱是可以的。如果在表單中使用<fieldset>元素，它具有一些內(nèi)建功能可以使用。如果一個(gè)fieldset被停用，子輸入元素將不會(huì)被提交。因此，將所有fieldset停用為起點(diǎn)，並根據(jù)amount中選擇的內(nèi)容啟用其中一個(gè)。若要隱藏已停用的fieldset，可以使用CSS。
我為提交事件新增了一個(gè)事件監(jiān)聽(tīng)器，這樣您就可以看到將要提交的資料。您可以使用PHP函數(shù)print_r($_POST)來(lái)查看請(qǐng)求中的所有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>
