JavaScript实现同一页面内两个表单互相传值的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法。分享给大家供大家参考。具体如下:

有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用。

运行效果截图如下:

JavaScript实现同一页面内两个表单互相传值的方法

具体代码如下:

<html>
<head>
<title>JavaScript同一页面两个表单互相传值</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="JavaScript">
function ok()
{
 document.form2.textfield2.value=document.form1.textfield.value;
}
function ok1()
{
document.form1.textfield.value=document.form2.textfield2.value;
}
</script>
<body>
<form name="form1" method="post" action="">
 <input type="text" name="textfield">
 <input type="button" name="Submit" value="A表单->传值给B表单" onClick="ok()">
</form>
<form name="form2" method="post" action="">
 <input type="text" name="textfield2">
 <input type="button" name="Submit" value="B表单->传值给A表单" onClick="ok1()">
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
javascript运动详解
Jul 06 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
You might like
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue组件的写法汇总
2018/04/12 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
详解Django中的过滤器
2015/07/16 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
大学生创业计划书
2014/08/14 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
学生会招新宣传语
2015/07/13 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
sql中mod()函数取余数的用法
2021/05/29 SQL Server