Question

我需要一些关于js的帮助 - 我也很不自觉地想知道如何做我需要的东西。搜索解决方案，但似乎我的问题非常具体。现在我得到了一个包含多个字段和一个按钮的表单，再添加一个字段。

但我不仅需要另一个领域，而是一个有自定义＆＃34;名称＆＃34;和＆＃34;占位符＆＃34;参数，取决于现有字段的数量。就像有三个字段一样，我需要使用占位符创建字段的函数=＆＃34;字段4＆＃34;和name =＆＃34; start4＆＃34;。

提前感谢您的帮助！

这是我的代码

＆＃13;

function add_fields() {
    
   var d = document.getElementById("fields");
  
   d.innerHTML += "<label>Field #</label><br /><input  type='text' class='start1' name='start#' placeholder='Field #'/><br />";
}

＆＃13;

<form action="" style="text-align: center;" method="get">

<div id="fields">
    <label>Field 1</label><br />
    <input  type="text" class="start1" name="start1" placeholder="Field 1"/><br />
    <label>Field 2</label><br />
    <input  type="text" class="start1" name="start2" placeholder="Field 2"/><br />
    <label>Field 3</label><br />
    <input  type="text" class="start1" name="start3" placeholder="Field 3"/><br />
</div>
<a class="button" onClick="add_fields()">Add field</a>

<input type="hidden" name="step" value="2"/><br /><br />
<input class="button" type="submit" value="Submit" />

</form>

＆＃13;

Answer 1

如果您不知道您将拥有多少个文件，您可以只计算现有文件而不是使用计数器。

function add_fields() {
   var count= document.querySelectorAll("#fields input").length + 1; 
   var d = document.getElementById("fields");
   d.innerHTML += "<label>Field "+count+"</label><br /><input  type='text' class='start"+count+"' name='start"+count+"' placeholder='Field "+count+"'/><br />";
   return false;
}

Here's a fiddle.

[不要忘记在函数中返回false，否则您的链接将被提交！]

Answer 2

如果需要，可以使用data-*属性作为计数器。请通过JS中的getAttribute("data-*")获取值。

此外，您可以使用DOM Elements编辑html视图。

HTML

<form action="" style="text-align: center;" method="get">
  <div id="fields" data-fields="3">
    <label for="field-1">Field 1</label><br />
    <input id="field-1" type="text" class="start1" name="start1" placeholder="Field 1"/><br />
    <label for="field-2">Field 2</label><br />
    <input id="field-2" type="text" class="start1" name="start2" placeholder="Field 2"/><br />
    <label for="field-3">Field 3</label><br />
    <input id="field-3" type="text" class="start1" name="start3" placeholder="Field 3"/><br />
  </div>

  <a class="button" onClick="add_fields()">Add field</a>

  <input type="hidden" name="step" value="2"/><br />
  <input class="button" type="submit" value="Submit" />
</form>

JS

function add_fields() {
  var field = document.getElementById("fields");
  var index = Number(field.getAttribute("data-fields")) + 1;

  var newLabel = document.createElement("label");
  var newField = document.createElement("input");
  var breakrow1 = document.createElement("br");
  var breakrow2 = document.createElement("br");

  newLabel.setAttribute("for", "field-" + index);
  newLabel.textContent = "Field " + index;

  newField.id = "field-" + index;
  newField.type = "text";
  newField.className = "start1";
  newField.name = "start" + index;
  newField.placeholder = "Field " + index;

  field.appendChild(newLabel);
  field.appendChild(breakrow1);
  field.appendChild(newField);
  field.appendChild(breakrow2);
  field.setAttribute("data-fields", index);
};

Answer 3

看起来你走在正确的轨道上，只需添加一个全局计数器并使用它来命名add_fields函数调用上的字段：

var counter = 4; // starting with 4
function add_fields() {    
  var d = document.getElementById("fields");

  d.innerHTML += "<label>Field #</label><br /><input  type='text' class='start1' name='start" + counter + "' placeholder='Field " + counter + "'/><br />";
  counter++;
}

根据字段数添加具有自定义属性的字段

3 个答案: