Question

我有一个带有两个输入字段的简单表单。一个用于产品名称和另一个价格。当我输入产品名称时作为产品价格，然后单击一个按钮，再添加1个字段另一种产品和价格，另一个产品领域和价格领域已添加，但输入的输入值将被删除...

如何在输入字段中保留输入的值而不清除？

这是我的JavaScript代码：

<script>
var total_products = 1;
function add_fields() {
    var d = document.getElementById("products_services");
    total_products++;
    d.innerHTML += "<div class=\"form-group\"><label for=\"product"+total_products+"\" class=\"col-sm-4 control-label\">Product "+total_products+"</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"product"+total_products+"\" placeholder=\"Product "+total_products+"\"></div></div>";
    d.innerHTML += "<div class=\"form-group\"><label for=\"price"+total_products+"\" class=\"col-sm-4 control-label\">Price "+total_products+"</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"price"+total_products+"\" placeholder=\"Price "+total_products+" (e.g. 479.59)\"></div></div>";
}
</script>

这是我的HTML代码：

<form class="form-horizontal" action="index.php" method="post">
<div id="products_services">
  <div class="form-group">
    <label for="product1" class="col-sm-4 control-label">Product 1</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="product1" placeholder="Product 1">
    </div>
  </div>
  <div class="form-group">
    <label for="price1" class="col-sm-4 control-label">Price 1</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="price1" placeholder="Price 1 (e.g. 479.59)">
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-4 col-sm-6">
  <button type="button" onclick="add_fields()" class="btn btn-default">Add 1 more Product</button> <button type="submit" class="btn btn-default">Submit</button>
  </div>
</div>
</form>

Answer 1

当你向products_services div添加额外的HTML时，你会让它从头开始重新创建它包含的每个元素，因此输入是空白的。

扩展元素内容的更好方法是调用document.createElement来创建新元素。

尝试对您的代码进行此更改：

var D = document.getElementById("products_services");
var d=document.createElement('div');
D.appendChild(d);

Answer 2

你不能只使用innerHTML来设置它。您需要附加新表单。看看下面的代码。

var total_products = 1;

window.add_fields = function() {
  total_products++;
  var d = document.getElementById("products_services");

  var htmlObject = document.createElement('div');
  var textnode = "<div class=\"form-group\"><label for=\"product" + total_products + "\" class=\"col-sm-4 control-label\">Product " + total_products + "</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"product" + total_products + "\" placeholder=\"Product " + total_products + "\"></div></div>";
  textnode += "<div class=\"form-group\"><label for=\"price" + total_products + "\" class=\"col-sm-4 control-label\">Price " + total_products + "</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"price" + total_products + "\" placeholder=\"Price " + total_products + " (e.g. 479.59)\"></div></div>";

  htmlObject.innerHTML = textnode;
  d.appendChild(htmlObject);


}

<form class="form-horizontal" action="index.php" method="post">
  <div id="products_services">
    <div class="form-group">
      <label for="product1" class="col-sm-4 control-label">Product 1</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="product1" placeholder="Product 1">
      </div>
    </div>
    <div class="form-group">
      <label for="price1" class="col-sm-4 control-label">Price 1</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="price1" placeholder="Price 1 (e.g. 479.59)">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-6">
      <button type="button" onclick="add_fields()" class="btn btn-default">Add 1 more Product</button>
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Answer 3

尝试使用类似的东西，而不是添加原始HTML：

$("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#TheFormYouAddTo");

你必须给你的表单一个id并将其放在.appendTo内（＆＃34;＃ID＆＃34;）;但这不应该更新所有的html。

使用JavaScript添加其他输入时，为什么输入的输入值会消失？

3 个答案: