动态添加文本框输入将作为一个保存到数据库
[英]Dynamic add textbox input's will save to the database as one
问题描述
So I have dynamic add textbox which is for COLOR, What I want is that if the user input a color then add 2 times for eg blue then red then yellow, so if the user submits it. 
因此，我有一个动态添加文本框，用于颜色。我想要的是，如果用户输入一种颜色，则为蓝色添加2次，然后是红色然后是黄色，所以如果用户提交了它。 It will go through the database as blue,red,yellow. 它将以蓝色，红色，黄色通过数据库。
Here's the code with javascript function of adding textbox 这是具有添加文本框的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>
1 个解决方案
解决方案1
1 2015-10-18 21:31:33
I've tried to keep the code in the same vein as you already have, however, there are other things that you can do to improve this, but those will come in time, namely; 我试图使代码保持与您现有的相同，但是，您可以做一些其他事情来改善此问题，但是这些都会及时出现。 using things such as knockout.js and html templates. 使用击倒.js和html模板之类的东西。
Also, I don't know how you are storing the data in the database, so matching the names/Ids of the form controls to what you will load and save from storage is another topic. 另外，我不知道您如何将数据存储在数据库中，因此将表单控件的名称/标识与要从存储中加载和保存的内容进行匹配是另一个主题。
Note that when removing items, do not decrement the controlIndex - it is purely for unique identification. 请注意，删除项目时，请勿减少controlIndex-纯粹用于唯一标识。 If you want finer control of the indexing, then arrays (and maybe knockout.js) may come into it. 如果您希望更好地控制索引编制，则可以将数组（甚至可能是基因敲除.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.