Добавить input в форму по нажатию кнопки

Question

Есть код обычной формы:

<form action="obrabotchik.php" method="post">
 <p>Поле 1: <input type="text" name="1" /></p>
 <p>Поле 2: <input type="text" name="2" /></p>
 <p><input type="submit" /></p>
</form>

Как добавить кнпоку, по нажатию на которую, добавлялась строка <p>Поле 3: <input type="text" name="**3**" /></p> ?

Т.е. по нажатию, добавляются инпуты, а в теге name прописываются следующие порядковые числа.

На PHP не получается решить проблему.

Answer 1

В данном случае, как полагаю, не нужен php для добавления поля. Делайте это на фронте, например, так:

function addEl() {
  let inputs = document.querySelectorAll('input[type="text"]')
  let lastNum = ((inputs[inputs.length-1]).getAttribute('name'));
  let nextNum = Number(lastNum) + 1;

  let elem = document.createElement("p");
  elem.innerHTML = `Поле ${nextNum} <input type="text" id="in${nextNum}" name="${nextNum}" />`;

  let parentGuest = document.getElementById("in"+lastNum);
  parentGuest.parentNode.insertBefore(elem, parentGuest.nextSibling);
}

<form action="obrabotchik.php" id="myform" method="post">
 <p>Поле 1: <input type="text" id="in1" name="1" /></p>
 <p>Поле 2: <input type="text" id="in2" name="2" /></p>
 <p><button type="button"  onclick="addEl()"/>Добавить поле</button></p>
 <p><input type="submit" /></p>
</form>

БЛОГ НА HUSL

Добавить input в форму по нажатию кнопки

Ответы (1 шт):