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

所以我有一个动态添加文本框用于颜色，我想要的是，如果用户输入一种颜色，然后添加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>

参考方案

我试图使代码保持与您现有的相同，但是，您可以做一些其他事情来改善此问题，但是这些都会及时出现。使用击倒.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>

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

带有AJAX和DOM处理API的下拉菜单 - javascript

我从API获取数据，但未在我的下拉菜单中显示。如果我用?act=showprovince回显，结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …

尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…

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

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…