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

Question

我需要一些 js 方面的帮助 - 我对它太菜鸟了，不知道如何做我需要的事情。搜索了解决方案，但我的问题似乎很具体。现在我得到了一个包含多个字段和一个按钮的表单，可以再添加一个字段。

但我不仅需要另一个字段，还需要一个具有自定义 "name" 和 "placeholder" 参数的字段，这取决于现有字段的数量。就像如果有三个字段，我需要使用 placeholder="Field 4" 和 name="start4".

创建字段的函数

提前感谢您的帮助！

这是我的代码

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

<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>

Answer 1

看来您的方向是正确的，只需添加一个全局计数器并使用它来命名 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++;
}

Answer 2

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

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.

[不要忘记在函数中 return false 否则你的 link 将被提交！]

Answer 3

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

此外，您可以使用 DOM 元素来编辑 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);
};

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

Add a field with custom attribute depending on number of fields

javascript

input

custom-attribute