所以我有用于颜色的动态添加文本框，我想要的是，如果用户输入颜色，则添加 2 次，例如蓝色然后红色然后黄色，所以如果用户提交它。它将通过数据库显示为蓝色、红色、黄色。
这是添加文本框的javascript函数代码
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementsByName('theValue');
var num = (numi.length + 1);
var newdiv = document.createElement('div');
var divIdName = 'my' + num + 'Div';
newdiv.setAttribute('id', divIdName);
newdiv.setAttribute('name', 'theValue');
newdiv.innerHTML = '<div class="form-group"><label for="color" class="control-label col-xs-4"><p class="left"></p></label> <div class="col-xs-7"> <input type=text id=' + num + 'value= ' + num + ' class= "req"><a class="btn btn-default bt" href="javascript:remove(' + divIdName + ')">Remove</a>';
ni.appendChild(newdiv);
}
function remove(dId) {
var ni = document.getElementById('myDiv');
ni.removeChild(dId);
}<label for="color" class="control-label col-xs-4">
<p class="left">Color/s</p>
</label>
<div class="col-lg-1">
<input name="color[]" class="req" id="theValue[]" autocomplete = "off" required/>
<div id="myDiv"></div>
<p><a class="btn btn-default bt " role="button" href="javascript:addElement()" >Add Color</a></p>
<div style='clear: both;'></div>
</div>
</div>最佳答案
我试图使代码与您已有的代码保持一致，但是，您可以采取其他措施来改进这一点，但这些会及时出现，即；使用诸如 Knockout.js 和 html 模板之类的东西。
此外，我不知道您如何将数据存储在数据库中，因此将表单控件的名称/Id 与您将从存储中加载和保存的内容相匹配是另一个主题。
请注意，删除项目时，不要减少 controlIndex - 它纯粹是为了唯一标识。如果你想更好地控制索引，那么数组(也许还有 Knockout.js)可能会出现。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p class="left">
<label for="color" class="control-label col-xs-4">Color/s</label>
</p>
<div class="col-lg-1">
<div id="myDiv">
<input name="color0" class="req" id="color0" autocomplete="off" required />
</div>
<p><a class="btn btn-default bt " role="button" href="javascript:addElement()">Add Color</a>
</p>
<div style='clear: both;'></div>
</div>
<script type="text/javascript">
// Create an index for the control Ids
// First one (and fixed on page) is 0 (color0).
var controlIndex = 0;
// Main Div for additional elements.
var myDiv = document.getElementById("myDiv");
function addElement() {
// Next index.
controlIndex++;
// Create new Div for new elements to be grouped in.
var newDiv = document.createElement("div");
newDiv.id = 'colorDiv' + controlIndex;
// Create new input element and set its properties.
var newElement = document.createElement("input");
newElement.id = newElement.name = 'color' + controlIndex;;
newElement.class = 'req';
newElement.setAttribute('required', 'required');
newElement.setAttribute('autocomplete', 'off');
// Create link to enable removal of new Div.
var newRemovalLink = document.createElement("a");
newRemovalLink.class = 'btn btn-default bt';
newRemovalLink.setAttribute('href', "javascript:remove('" + newDiv.id + "')");
newRemovalLink.innerHTML = ' X ';
// Add the elements to the new Div and add that to the main Div.
newDiv.appendChild(newElement);
newDiv.appendChild(newRemovalLink);
myDiv.appendChild(newDiv);
}
function remove(elementId) {
// Get the main Div.
var myDiv = document.getElementById('myDiv');
// Get the Div (or other element) to remove.
var element = document.getElementById(elementId);
// Remove it from the main Div.
myDiv.removeChild(element);
}
</script>
</body>
</html>关于javascript - 动态添加文本框输入将作为一个保存到数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33194684/