Home > Article > Web Front-end > How to implement data transfer between several forms in Javascript?

How to implement data transfer between several forms in Javascript?

伊谢尔伦Original: 2017-07-18 15:13:241581browse

First, the simplest is the data transfer of forms in the same web page.

For example, there are two forms on a web page, each with a text box and a button. Click the buttons to operate the value of each other's text box. The example we gave is to pay one text box to another text box. The specific HTML code is as follows:

<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<input type="text" name="textfield"> 
<input type="button" name="Submit" value="1--------->2" onClick="ok()"> 
</form> 
<form name="form2" method="post" action=""> 
<input type="text" name="textfield2"> 
<input type="button" name="Submit" value="2----->1" onClick="ok1()"> 
</form> 
</body> 
</html>

The above is the HTMl code. You may have noticed the onclik code. There are two functions. Next is the JAVASCRIPT code:

<script language="JavaScript"> 
function ok() 
{ 
document.form2.textfield2.value=document.form1.textfield.value; 
} 
function ok1() 
{ 
document.form1.textfield.value=document.form2.textfield2.value; 
} 
</script>

Second, The second is data transfer between the text boxes of the form between the two windows. In fact, this can be expanded on the original basis. Regarding how to create a pop-up window and the code of the form in the form, I won’t go into details here. Now let’s talk about how to operate the data of the text box in the form of the parent window. The specific code is as follows:

<script language="JavaScript"> 
function ok() 
{ 
opener.document.form2.textfield2.value=document.form1.textfield.value 
} 
</script>

Third, the third is to transfer data between the text boxes of the form between the frame web pages.
The thing to note is the way the frame is written:

<frameset cols="505,505"> 
<frame src="test.htm" name="leftr" id="leftr">//定义框架的名称 
<frame src="test2.htm" id="right" name="right"> 
</frameset> 
<noframes><body> 
</body></noframes>

Specific The implementation code is as follows:

<script language="JavaScript"> 
function ok() 
{ 
parent.leftr.document.form2.textfield2.value 
=document.form1.textfield.value 
} 
</script>

A simple method for interoperating the text box values between these three types of windows has been implemented. The other thing that needs attention is the relationship between them.

The above is the detailed content of How to implement data transfer between several forms in Javascript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Let’s talk about the usage of various complex branch statements in JavaScriptNext article：Let’s talk about the usage of various complex branch statements in JavaScript

Related articles

See more