前言:我對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(); //隐藏所有 $(`#${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"和其他輸入嗎?對於識別和解決此問題的任何幫助將不勝感激。
P粉1419112442023-09-07 09:35:41
首先,使用沒有空格的值作為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>