動態添加文本框輸入將作為一個保存到數據庫

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