0

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

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

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

1 ответ 1

0
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

3
  • хорошая идея, но на демке та же беда, всем полям присваивается значение последнего ,, new_input.name = "my_vage_" + counter ; ,,
    – keks24
    29 мая 2017 в 19:22
  • поправил.. на самом деле цикл тут лишний - из-за него все и работало неправильно. Так как переменная была new_input, то в цикле 4 раза вставлялся инпут с последним значением, т.е. my_vage 29 мая 2017 в 19:32
  • спасибо! на тот момент выход был именно таким, но теперь учту. теперь надо придумать как подвязать базу если имена с счётчиком...
    – keks24
    29 мая 2017 в 19:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.