Добавить поле с пользовательским атрибутом в зависимости от количества полей

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

Если вы не знаете заранее, сколько файлов у вас будет, вы можете просто сосчитать существующие вместо использования счетчика.

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 в функцию, иначе ваша ссылка будет отправлена!]

Answer 2

Ты можешь использовать data-* атрибут для счетчика, если хотите. Пожалуйста, получите значение по getAttribute("data-*") в JS.

Кроме того, вы можете использовать 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++;
}