Проблемы с name у тега input, при нажатии на кнопку добавлять блок <div>

272

31 мая 2017, 03:08

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

Код отрабатывает за исключением одного момента - всем полям присваивается одинаковое имя...
Подскажите как можно исправить это.

<form>
  <div id="inputi">
    <div ><input name="my_org"> 1</div>
    <div ><input name="my_car"> 2 </div>
    <div ><input name="my_phone"> 3 </div>
    <div ><input name="my_vage"> 4 </div> <br/>
  </div>
</form>
<input type="button" onclick="add_input();" value="Добавить элемент"> <br/>
<script>
  var p = document.getElementById("inputi") ;
  var length = 1 ;
  function add_input() {
    for (var i = 0; i <= 4; i++) {
      var new_input = document.createElement("input") ;
      new_input.name = "my_input" ;
      var new_input = document.createElement("input") ;
      new_input.name = "my_car" ;
      var new_input = document.createElement("input") ;
      new_input.name = "my_phone" ;
      var new_input = document.createElement("input") ;
      new_input.name = "my_vage" ;
      var div = document.createElement('div') ;
      div.appendChild(new_input) ;
      p.appendChild(div) ;
    }
    div.innerHTML = '<br>поле 2';
  } ;
</script>

Answer 1

var container = document.getElementById("inputi") ;
var length = 1,
    counter = 1;
function add_input() {
  var div = document.createElement('div') ;
  var delimiter = document.createTextNode("-------" + counter + "--------");
  div.appendChild(delimiter) ;
  var new_input = document.createElement("input") ;
  new_input.name = "my_input_" + counter  ;
  div.appendChild(new_input) ;
  var new_car = document.createElement("input") ;
  new_car.name = "my_car_" + counter ;
  div.appendChild(new_car) ;
  var new_phone = document.createElement("input") ;
  new_phone.name = "my_phone_" + counter ;
  div.appendChild(new_phone) ;
  var new_wage = document.createElement("input") ;
  new_wage.name = "my_wage_" + counter ;
  div.appendChild(new_wage) ;
  container.appendChild(div) ;
  counter++;
}

DEMO