javascript表单之间的数据传递

最新推荐文章于 2025-06-09 09:18:05 发布

最新推荐文章于 2025-06-09 09:18:05 发布 · 93 阅读

文章标签：

#JavaScript #框架 #HTML #ViewUI

博客介绍了同一个网页里表单的数据传递，以一个网页上两个表单为例，每个表单有文本框和按钮，点击按钮可操作对方文本框的值，如将一个文本框内容付给另一个，并给出了具体HTML代码。

今天有朋友问我关于用javascript来进行页面各表单之间的数据传递的问题，我以前也写过，不过从来没有注意，今天总结了一下，希望能够给大家一些帮助，也帮助我总结以前学过，用过的知识。

一，最简单的就是同一个网页里的表单的数据传递。

举个实例，一个网页上有两个表单，每个表单里一个文本框，一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一个文本框。具体的HTML代码如下：

<pa><table bordercolor="#55aaff" cellspacing="0" cellpadding="0" rules="none" width="500" align="center" bgcolor="#ddedfb" border="1"><tbody><tr> <td width="10"><br></td> <td> <p><html><br><head><br><title>Untitled Document</title><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br></head><br><body></p> <p><form name="form1" method="post" action=""><br> <input type="text" name="textfield"><br> <input type="button" name="Submit" value="1---------&gt;2" onClick="ok()"><br></form></p> <p><form name="form2" method="post" action=""><br> <input type="text" name="textfield2"><br> <input type="button" name="Submit" value="2-----&gt;1" onClick="ok1()"><br></form></p> <p></body><br></html></p> </td> </tr></tbody></table><p></p> <p> 以上为HTMl的代码，大家可能注意到了onclik的代码了，有两个函数，接下来就是javascript的代码了：</p> <p> </p><table bordercolor="#55aaff" cellspacing="0" cellpadding="0" rules="none" width="500" align="center" bgcolor="#ddedfb" border="1"><tbody><tr> <td width="10"><br></td> <td> <p><script language="javascript"><br>function ok()<br>{<br> document.form2.textfield2.value=document.form1.textfield.value;<br>}<br>function ok1()<br>{<br>document.form1.textfield.value=document.form2.textfield2.value;<br>}<br></script></p> </td> </tr></tbody></table><p> 二，第二种是两个窗口之间的表单的文本框之间数据传递。<br><br> 其实这个可以在原来的基础上进行一些扩展就可以了。关于如何创建弹出窗口，窗体里的表单的代码，在这里就不多说了，现在在这里说一下如何操作父窗口的表单里的文本框的数据。具体代码如下：<br><br></p><table bordercolor="#55aaff" cellspacing="0" cellpadding="0" rules="none" width="500" align="center" bgcolor="#ddedfb" border="1"><tbody><tr> <td width="10"><br></td> <td> <p><script language="javascript"><br>function ok()<br>{<br> opener.document.form2.textfield2.value=document.form1.textfield.value<br>}<br></script></p> </td> </tr></tbody></table><p></p> <p> 三，第三种就是框架网页之间的表单的文本框之间数据传递.<br><br> 注意的地方是框架的写法：<br><br></p><table bordercolor="#55aaff" cellspacing="0" cellpadding="0" rules="none" width="500" align="center" bgcolor="#ddedfb" border="1"><tbody><tr> <td width="10"><br></td> <td> <p><frameset cols="505,505"><br> <frame src="test.htm" name="leftr" id="leftr">//定义框架的名称<br> <frame src="test2.htm" id="right" name="right"><br></frameset><br><noframes><body></p> <p></body></noframes></p> </td> </tr></tbody></table><p>具体的实现代码如下：<br><br></p><table bordercolor="#55aaff" cellspacing="0" cellpadding="0" rules="none" width="500" align="center" bgcolor="#ddedfb" border="1"><tbody><tr> <td width="10"><br></td> <td> <p><script language="javascript"><br>function ok()<br>{<br> parent.leftr.document.form2.textfield2.value=document.form1.textfield.value<br>}<br></script></p> </td> </tr></tbody></table><br> 这三种窗口之间的文本框数值互相操作的简单方法就实现了，其它需要注意的就是他们之间的关系。</pa>