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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python爬虫容易学吗
2020/06/02 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
儿童生日会策划方案
2014/05/15 职场文书
教师考察材料范文
2014/06/03 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Python办公自动化PPT批量转换操作
2021/09/15 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis