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

【问题标题】：Get data from one text input and pass it into a second form input using innerHTML从一个文本输入中获取数据并使用 innerHTML 将其传递到第二个表单输入中
【发布时间】：2020-09-17 04:28:01
【问题描述】：

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

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>

【问题讨论】：

标签： javascript forms input dom-events

【解决方案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>

【讨论】：