Связывание текстовых полей вместе в динамической форме

avatar
David Metcalfe
7 апреля 2018 в 22:42
30
0
0

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

<!doctype html>
<head>
   <title>Test</title>
</head>
<body>
   <div id="form">
      <form id="address">
         <p>Route:</p>
         <input type="text" name="Address" placeholder="Origin">
         <input type="text" name="Address" placeholder="Destination">
         <button type="button" id="add" onclick="addField('address')">Add field</button>
      </form>
   </div>
   <script type="text/javascript">
      function addField(id) {
          // OnClick function for adding additonal fields for
          // transit routes with multiple destinations.
          var field = `<br/><br/>
          <input type="text" name="Address" placeholder="Origin">
          <input type="text" name="Address" placeholder="Destination">`
          document.getElementById(id).innerHTML += field
      }
   </script>
</body>
</html>

Я могу получить массив всех элементов внутри:

var elements = document.getElementById("address").elements;

Но я хочу связать каждое поле "Назначение" со следующим полем "Начало", чтобы "Назначение" в последнем поле стало источником для следующей строки. Я представляю, что-то вроде того, что показано ниже, но у меня в голове не щелкает.

elements[elements.indexOf(this)-1].value;
Источник
9000
7 апреля 2018 в 22:48
0

Вместо того, чтобы кодировать все это вручную, не рассматривали ли вы возможность использования jQuery или простой структуры, такой как Knockout? (Не говоря уже о реактивных фреймворках.)

David Metcalfe
7 апреля 2018 в 23:39
0

@9000 У фреймворков есть свое применение, но, на мой взгляд, они вредят обучению. На данный момент я недостаточно сообразителен, чтобы абстрагироваться от вещей. Спасибо за предложения, хотя.

Ответы (0)