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

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

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>

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

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

您正在设置另一个输入的值，因此需要使用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>

对于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>

相关内容

最新更新

热门标签：