Dynamic add textbox input's will save to the database as one
Question
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. It will go through the database as blue,red,yellow.
Here's the code with javascript function of adding textbox
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 answers
solution1
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.
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. If you want finer control of the indexing, then arrays (and maybe knockout.js) may come into it.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.