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 相关文章推荐
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
vue params、query传参使用详解
Sep 12 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
微信小程序用户授权最佳实践指南
May 08 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
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php数组转成json格式的方法
2015/03/09 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
eBay美国官网:eBay.com
2020/10/24 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
暑期实践个人总结
2015/03/06 职场文书
终止合同协议书范本
2016/03/22 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书