JavaScript实现同一页面内两个表单互相传值的方法
作者:微光时间:2026-10-29 13:37:53浏览:339
本文介绍在同一个HTML页面中,如何通过JavaScript脚本实现两个独立表单之间的数据互相传递。通过获取输入框的值并赋值给另一个表单的对应字段,实现简单的数据同步功能。
JavaScript实现同页面表单数据同步传递
本文通过具体实例,演示了如何在同一个网页中利用JavaScript技术,实现两个不同表单之间数据的相互传递与同步。该方案旨在为开发者提供实用的参考代码。
在Web开发中,有时需要在提交表单前,将其中一个表单的输入值同步到另一个表单。实现这一需求并不复杂,核心思路是利用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零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
