动态添加文本框输入将作为一个保存到数据库

Question

因此，我有一个动态添加文本框，用于颜色。我想要的是，如果用户输入一种颜色，则为蓝色添加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>

Answer 1

我试图使代码保持与您现有的相同，但是，您可以做一些其他事情来改善此问题，但是这些都会及时出现。 使用击倒.js和html模板之类的东西。

另外，我不知道您如何将数据存储在数据库中，因此将表单控件的名称/标识与要从存储中加载和保存的内容进行匹配是另一个主题。

请注意，删除项目时，请勿减少controlIndex-纯粹用于唯一标识。 如果您希望更好地控制索引编制，则可以将数组（甚至可能是基因敲除.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>

动态添加文本框输入将作为一个保存到数据库

问题描述

1 个解决方案

解决方案1
1 2015-10-18 21:31:33

动态添加文本框输入将作为一个保存到数据库

问题描述

1 个解决方案

解决方案1 1 2015-10-18 21:31:33

解决方案1
1 2015-10-18 21:31:33