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>