Вставить в текстовое поле и связать с полями формы

Question

Я хочу иметь поле ввода, в которое клиент может вставлять информацию.Затем информация, вставленная в поле, автоматически будет связана / вставлена ​​в правильное поле формы, чтобы клиент мог просмотреть содержимое и, возможно, отредактировать его перед отправкой формы.Как взять вставленный контент и связать его с полями ввода?

Содержимое, которое нужно вставить в поле ввода, всегда будет иметь следующий формат:

Серийный номер: Оборудование:Ответственный: Ответственный за электронную почту: Следующий сервис: Куплено:

1234567890 Тест на компьютере Mac Testson test.testson@example.com 2020-05-17 2019-05-17

Итак, первая строка с категорией и вторая строка с фактическим содержанием должны быть заполнены в полях ввода формы.Содержимое из «textarea» будет привязано к правильным полям ввода.

<h2>Service form</h2>

<textarea rows = "2" cols = "60" name = "import field">
Paste content here
     </textarea><br>

<form action="/action_page.php">

  Name:<br>
  <input type="text" name="firstname">
  <br>

  E-mail:<br>
  <input type="text" name="lastname">
  <br>

    Serial number:<br>
  <input type="text" name="lastname">
  <br>

    Equipment:<br>
  <input type="text" name="lastname">
  <br>  

  Next service:<br>
  <input type="text" name="lastname">
  <br>

    Bought:<br>
  <input type="text" name="lastname">
  <br><br>

  <input type="submit" value="Submit">
</form> 

Answer 1

Итак, в основном мы делаем следующее: мы удаляем символ новой строки \n из значения текстовой области.Затем мы разбиваем строку на имена и значения полей по последнему вхождению :, после чего мы разделяем строку и строку значений на массив по символу : и ;, наконец, мы присвоили полю ввода формы id то же самое, что и текст без space и -, и мы присваиваем значение полю

function arrange(){
  var data = document.getElementById("Data").value.replace("\n", "");

  var fieldPart = data.substr(0, data.lastIndexOf(":") +1).split(":");
  var valuePart = data.substr(data.lastIndexOf(":") +1, data.length).split(";");

  fieldPart.pop();
  valuePart.pop();

  for(var i = 0; i < fieldPart.length; i++){
    document.getElementById(fieldPart[i].replace(/ /g, "").replace(/-/g, "")).value = valuePart[i].trim();
  }
}

textarea{
  width: 700px;
  height: 40px;
}

<h2>Service form</h2>

<textarea id="Data" rows = "2" cols = "60" name = "import field" palceholder="Paste content here">

</textarea><br>
<button onclick="arrange()">Arrange</button>
<form action="/action_page.php">

  Name:<br>
  <input type="text" name="firstname" id="Liable">
  <br>

  E-mail:<br>
  <input type="text" name="lastname" id="Emailliable">
  <br>

    Serial number:<br>
  <input type="text" name="lastname" id="Serialnumber">
  <br>

    Equipment:<br>
  <input type="text" name="lastname" id="Equipment">
  <br>  

  Next service:<br>
  <input type="text" name="lastname" id="Nextservice">
  <br>

    Bought:<br>
  <input type="text" name="lastname" id="Bought">
  <br><br>

  <input type="submit" value="Submit">
</form>