HTML如何在按鈕單擊時添加唯一的輸入元素

Question

嗨，我想弄清楚如何使用普通 javascript 在按鈕單擊時添加輸入元素，以便后者用於將數據發送到后端。

<div class="myDiv">
<input type="text" id="inputData" name="selectOption">
        <select id="optionData">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
<div class="myDiv">

<input type="button" value="Add element" onclick="AddElement()">

我將使用它向后端發送數據。 我能想到的唯一方法是聲明一個全局 javascript 數組並使用它來存儲它

var elements = [];
function AddElement() {
  const inputData = document.getElementById("inputData").value;
  const optionData = document.getElementById("optionData").value;
  const data = {
    inputData: inputData,
    optionData: optionData
  };
  elements.push(data);
  // create new element in dom with the data and random ids and clear the inputData and optionData element.
}

上面的問題是對現有元素的更改不會反映在全局數組中。

有人可以提出更好的方法嗎？

Answer 1

如何將數據發送到服務器等有點不清晰，我看到在如何實現這一點的技術上存在一些混淆。 所以我將介紹兩種情況。 兩者都將根據要求從您的初始select和input創建新的輸入字段，並另外詢問如何將它們發送到服務器。

我不會在這些字段上創建唯一的ids或name屬性，因為這意味着您需要在前面知道生成了哪些ids或names並在提交時在服務器端獲取它們，而不是在使用 HTML 和 PHP 提交表單時，我們將使用input names屬性制作array 。 JS 向服務器發送數據的情況與使用數組類似。

第一種使用 PHP 並將表單輸入名稱設置為數組的方法：

1 - 在您的輸入下方創建一個表單並選擇

<form id="result">
...
</form>

2 - 單擊按鈕，像您一樣將數據保存到變量中，然后清除這些字段：

document.getElementById("inputData").value="";
document.getElementById("optionData").value="";

3 - 然后創建兩個輸入字段，用數據填充它們並將它們附加到表單中：

document.querySelector("#result").innerHTML +=
 '<input type="text"  name="inputData[]" value="'+inputData+'">
<input type="text"  name="optionData[]" value="'+optionData+'"><br>';

4 - 輸入字段之一將具有name="inputData[] " 其他將具有name="optionData[]" 。 注意[]符號，它將在表單上提交創建數組。 然后或服務器端例如使用 PHP 捕獲該數組並使用foreach()將它們作為keys和values發送到服務器。 請在此處閱讀更多相關信息： 發布具有相同名稱屬性的表單字段

示例片段：

 var elements = []; function AddElement() { const inputData = document.getElementById("inputData").value; const optionData = document.getElementById("optionData").value; // create new element in dom with the data and random ids and clear the inputData and optionData element. document.getElementById("inputData").value=""; document.getElementById("optionData").value=""; //clear the inputData and optionData element. document.querySelector("#result").innerHTML += '<input type="text" name="inputData[]" value="'+inputData+'"><input type="text" name="optionData[]" value="'+optionData+'"><br>'; // add new line with 2 inputs, one is inputData other is optionData }

 <div class="myDiv"> <input type="text" id="inputData" name="selectOption"> <select id="optionData"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <form id="result"> </form> <input type="button" value="Add element" onclick="AddElement()"> </div>

可以通過多種方式使用 JS 發送數據。 您可以使用上面的 HTML 標記，然后像這樣捕獲所有表單數據：

//EXAMPLE USING JS TO GET FORM DATA
var formData = new FormData(document.querySelector('#result'))
console.clear()
for (var pair of formData.entries()) {
    console.log(pair[0]+ ' - ' + pair[1]); 
    // here you could send AJAX data to server for each entry 
}

請閱讀有關如何使用 JavaScript/jQuery 獲取表單數據的更多信息？

片段示例：

 var elements = []; function AddElement() { const inputData = document.getElementById("inputData").value; const optionData = document.getElementById("optionData").value; // create new element in dom with the data and random ids and clear the inputData and optionData element. document.getElementById("inputData").value=""; document.getElementById("optionData").value=""; //clear the inputData and optionData element. document.querySelector("#result").innerHTML += '<input type="text" name="inputData" value="'+inputData+'"><input type="text" name="optionData" value="'+optionData+'"><br>'; // add new line with 2 inputs, one is inputData other is optionData //EXAMPLE USING JS TO GET FORM DATA var formData = new FormData(document.querySelector('#result')) console.clear() for (var pair of formData.entries()) { console.log(pair[0]+ ' - ' + pair[1]); // here you could send AJAX data to server for each entry } }

 <div class="myDiv"> <input type="text" id="inputData" name="selectOption"> <select id="optionData"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <form id="result"> </form> <input type="button" value="Add element" onclick="AddElement()"> </div>

或者，您可能希望在每行初始創建時將它們保存到數組中，並使用 AJAX 發送項目，甚至不使用 HTML 表單。

並回答如何創建唯一 ID、名稱或類的問題：在 click 函數之外將i變量聲明為數字0 ：

i="0";
//set initial unique number i

然后在點擊里面像這樣調用它++i這將導致每次++i啟動時的optionData1 、 optionData2等：

name="optionData'+(++i)+'"

你可以在 ids、classes 或任何東西上使用它：

id="newId'+(++i)+'"

newid1 ， newid2等...

但就像我說的，你不能真正生成唯一的 id 或任何東西，因為你不能在前面對它們進行編程以使用它們將字段發送到服務器。

例子：

 var elements = []; i = "0"; //set initial uniqe number i function AddElement() { const inputData = document.getElementById("inputData").value; const optionData = document.getElementById("optionData").value; // create new element in dom with the data and random ids and clear the inputData and optionData element. document.getElementById("inputData").value = ""; document.getElementById("optionData").value = ""; //clear the inputData and optionData element. document.querySelector("#result").innerHTML += '<input type="text" name="inputData' + (++i) + '" value="' + inputData + '"><input type="text" name="optionData' + (++i) + '" value="' + optionData + '"><br>'; // add new line with 2 inputs, one is inputData other is optionData // use ++i to generate last number plus, and just add it to some name, id or class; name="optionData'+(++i)+'" console.clear(); [...document.querySelectorAll('#result > input')].forEach(input => { console.log(input.getAttribute("name")); }) }

 <div class="myDiv"> <input type="text" id="inputData" name="selectOption"> <select id="optionData"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <form id="result"> </form> <input type="button" value="Add element" onclick="AddElement()"> </div>