Javascript 表单之间的数据传递代码


Posted in Javascript onDecember 04, 2008

一,最简单的就是同一个网页里的表单的数据传递。
举个实例,一个网页上有两个表单,每个表单里一个文本框,一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一个文本框。具体的HTML代码如下: 

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

以上为HTMl的代码,大家可能注意到了onclik的代码了,有两个函数,接下来就是JAVASCRIPT的代码了:
<script language="JavaScript"> 
function ok() 
{ 
document.form2.textfield2.value=document.form1.textfield.value; 
} 
function ok1() 
{ 
document.form1.textfield.value=document.form2.textfield2.value; 
} 
</script>

二,第二种是两个窗口之间的表单的文本框之间数据传递。其实这个可以在原来的基础上进行一些扩展就可以了。关于如何创建弹出窗口,窗体里的表单的代码, 在这里就不多说了,现在在这里说一下如何操作父窗口的表单里的文本框的数据。具体代码如下:
<script language="JavaScript"> 
function ok() 
{ 
opener.document.form2.textfield2.value=document.form1.textfield.value 
} 
</script>

三,第三种就是框架网页之间的表单的文本框之间数据传递.
注意的地方是框架的写法:
<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>

具体的实现代码如下:
<script language="JavaScript"> 
function ok() 
{ 
parent.leftr.document.form2.textfield2.value 
=document.form1.textfield.value 
} 
</script>

这三种窗口之间的文本框数值互相操作的简单方法就实现了,其它需要注意的就是他们之间的关系。
Javascript 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Javascript !!的作用
Dec 04 #Javascript
js 深拷贝函数
Dec 04 #Javascript
JavaScript 基础问答三
Dec 03 #Javascript
asp 取文本框名称代码
Dec 02 #Javascript
JavaScript获得选中文本内容的方法
Dec 02 #Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 #Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 #Javascript
You might like
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python绘制趋势图的示例
2020/09/17 Python
init进程的作用
2012/04/12 面试题
大学生职业生涯规划书模板
2014/01/18 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
校庆口号
2014/06/20 职场文书
保险公司开门红口号
2014/06/21 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
换届选举主持词
2015/07/03 职场文书
运动会5000米加油稿
2015/07/21 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers