Блог

Главная - Вопросы по программированию - Получение данных из одного текстового ввода и передача их во вторую форму ввода с использованием innerHTML

Получение данных из одного текстового ввода и передача их во вторую форму ввода с использованием innerHTML

#javascript #forms #input #dom-events

#javascript #формы #ввод #dom-события

Вопрос:

Я пытаюсь передать одно входное значение во второе поле ввода следующим образом:

 document.getElementById('firstForm2').innerHTML = first;

но innerHTML не работает для передачи значения, какой тип метода мне следует использовать?

         function gerdata() {
            //Collect First form Data 
            var first = document.getElementById("firstForm1").value;
            var last = document.getElementById("lastForm1").value;
            var phone = document.getElementById("phoneForm1").value;

            // transfer to 2nd Form
            document.getElementById('firstForm2').innerHTML = first;
            document.getElementById('lastForm2').innerHTML = last;
            document.getElementById('phoneForm2').innerHTML = phone;

        }  
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
  
    <br><br><br><br>

    <form action="">
        <h3>Form 1</h3>

        <label >First Name</label>
        <input id="firstForm1" type="text"><br>

        <label>Last Name </label>
        <input id="lastForm1" type="text"><br>

        <label> Phone Number</label>
        <input id="phoneForm1" type="text">
    </form>


    <br><br>



    <form action="" >
        <h3>Form 2</h3>

        <label >First Name</label>
        <input id="firstForm2" type="text"><br>

        <label>Last Name </label>
        <input id="lastForm2" type="text"><br>

        <label> Phone Number</label>
        <input id="phoneForm2" type="text">
    </form>
<br><br>
    <button onclick="gerdata()">transfer data to 2nd Form</button>
    <br><br><br><br><br><br><br><br>

Ответ №1:

я думаю, что это должно быть значение, а не innerHTML для полей ввода

 document.getElementById('firstForm2').value= first;

Ответ №2:

Вы устанавливаете значение другого ввода, поэтому вам нужно использовать value вместо innerHTML, например

 document.getElementById('firstForm2').value = first;

Рабочий пример:

 function gerdata() {
            //Collect First form Data 
            var first = document.getElementById("firstForm1").value;
            var last = document.getElementById("lastForm1").value;
            var phone = document.getElementById("phoneForm1").value;

            // transfer to 2nd Form
            document.getElementById('firstForm2').value = first;
            document.getElementById('lastForm2').value = last;
            document.getElementById('phoneForm2').value = phone;
        }  
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="">
        <h3>Form 1</h3>

        <label >First Name</label>
        <input id="firstForm1" type="text"><br>

        <label>Last Name </label>
        <input id="lastForm1" type="text"><br>

        <label> Phone Number</label>
        <input id="phoneForm1" type="text">
    </form>


    <form action="" >
        <h3>Form 2</h3>

        <label >First Name</label>
        <input id="firstForm2" type="text"><br>

        <label>Last Name </label>
        <input id="lastForm2" type="text"><br>

        <label> Phone Number</label>
        <input id="phoneForm2" type="text">
    </form>
<br><br>
    <button onclick="gerdata()">transfer data to 2nd Form</button>
    <br><br><br><br><br><br><br><br>

Ответ №3:

Для input использования value вместо innerHTML 

 function gerdata() {
  //Collect First form Data 
  var first = document.getElementById("firstForm1").value;
  var last = document.getElementById("lastForm1").value;
  var phone = document.getElementById("phoneForm1").value;

  // transfer to 2nd Form
  document.getElementById('firstForm2').value = first;
  document.getElementById('lastForm2').value = last;
  document.getElementById('phoneForm2').value = phone;

}  
 <form action="">
  <h3>Form 1</h3>

  <label>First Name</label>
  <input id="firstForm1" type="text"><br>

  <label>Last Name </label>
  <input id="lastForm1" type="text"><br>

  <label> Phone Number</label>
  <input id="phoneForm1" type="text">
</form>


<br><br>



<form action="">
  <h3>Form 2</h3>

  <label>First Name</label>
  <input id="firstForm2" type="text"><br>

  <label>Last Name </label>
  <input id="lastForm2" type="text"><br>

  <label> Phone Number</label>
  <input id="phoneForm2" type="text">
</form>
<br><br>
<button onclick="gerdata()">transfer data to 2nd Form</button>