Data transmission between javascript forms

Source: Internet
Author: User

Today, a friend asked me about how to use JAVASCRIPT to transfer data between various forms on the page. I wrote it before, but I never paid attention to it. Today I have summarized it, I hope to give you some help and summarize the previous and used knowledge.

1. The simplest thing is to transfer data from forms on the same webpage.

For example, a webpage has two forms, one text box and one button in each form. Click the button to operate on the value of the text box of the other party. The example here is to pay one text box to another. 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 --------- & gt; 2" onClick = "OK ()">
</Form>

<Form name = "form2" method = "post" action = "">
<Input type = "text" name = "textfield2">
<Input type = "button" name = "Submit" value = "2 ----- & gt; 1" onClick = "ok1 ()">
</Form>

</Body>
</Html>
 


The above is the HTMl code. You may have noticed the onclik Code. There are two functions, followed by 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>
2. data transmission between the text boxes of the form between two windows.

In fact, this can be expanded on the basis of the original. We will not talk about how to create a pop-up window and the form code in the form here. Here we will talk about how to operate the text box data in the form of the parent window. The Code is as follows:


<Script language = "JavaScript">
Function OK ()
{
Opener.doc ument. form2.textfield2. value = document. form1.textfield. value
}
</Script>
 


3. The third type is data transmission between forms and text boxes in the framework webpage.

Note the following:


<Frameset cols = "505,505">
<Frame src = "test.htm" name = "leftr" id = "leftr"> // define the framework name
<Frame src = "test2.htm" id = "right" name = "right">
</Frameset>
<Noframes> <body>

</Body> </noframes>
 


The specific implementation code is as follows:


<Script language = "JavaScript">
Function OK ()
{
Parent.leftr.doc ument. form2.textfield2. value = document. form1.textfield. value
}
</Script>
 

The text box values between these three windows can be operated on one another in a simple way. The other thing to note is the relationship between them.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.