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

Add a field with custom attribute depending on number of fields

本文关键字：字段 自定义属性 添加      更新时间：2023-09-26

我需要一些关于js-im的帮助，因为js-im中没有任何东西可以帮助我找到我需要的东西。寻找解决方案，但我的问题似乎很具体。现在我得到了一个表单，它有几个字段和一个按钮，可以再添加一个字段。

但我不仅需要另一个字段，还需要一个具有自定义"名称"answers"占位符"参数的字段，这些参数取决于现有字段的数量。就像有三个字段一样，我需要一个函数来创建placeholder="Field4"和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>

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

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

这是一把小提琴。

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

如果需要，可以使用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_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++;
}
相关文章：