从一个文本输入中获取数据并使用 innerHTML 将其传递到第二个表单输入中

Question

我正在尝试将一个输入值传递给第二个输入框，如下所示：

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>

Answer 1

我认为输入字段应该是 value 而不是 innerHTML

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

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

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

从一个文本输入中获取数据并使用 innerHTML 将其传递到第二个表单输入中

Get data from one text input and pass it into a second form input using innerHTML

javascript

forms

input

dom-events