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

Question

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

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

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

Ответы (0)