单次提交表单至多个页面

在Web开发中,经常需要将用户提交的表单数据发送到服务器进行处理。通常情况下,使用一个表单提交到一个页面。但是,有时候可能需要将数据发送到多个页面进行处理。本文将介绍如何通过JavaScript和隐藏的iframe实现这一功能。

创建表单

首先,需要创建一个简单的表单。这个表单包含用户名和密码输入框,以及一个提交按钮。

<form name="Form1" action="login1.php" method="post"> 用户名 <input type="text" name="username"> 密码 <input type="password" name="password"> <input type="submit" value="发送" name="button1" onclick="return OnButton1();"> </form>

在这个表单中,当用户点击提交按钮时,会调用一个名为OnButton1的JavaScript函数。

编写JavaScript函数

接下来,需要编写JavaScript函数OnButton1。这个函数的作用是将表单数据提交到两个不同的页面。

<script language="javascript"> <!-- function OnButton1() { document.Form1.action = "login2.php"; // 第一个目标 document.Form1.target = "iframe1"; // 在iframe中打开 document.Form1.submit(); // 提交表单 document.Form1.action = "page3.php"; // 第二个目标 document.Form1.target = "iframe2"; // 在另一个iframe中打开 document.Form1.submit(); // 再次提交表单 return true; } //--> </script>

在这个函数中,首先将表单的action属性设置为第一个目标页面的URL,然后将其target属性设置为一个隐藏的iframe的名称。接着,提交表单。然后,将action属性设置为第二个目标页面的URL,再次提交表单。这样,用户只需点击一次提交按钮,表单数据就会被发送到两个页面。

隐藏iframe

为了不干扰用户,需要将iframe隐藏起来。可以通过设置样式属性visibility为hidden来实现这一点。

<div style="visibility:hidden"> <iframe name="iframe1" width="40" height="40"></iframe> <iframe name="iframe2" width="40" height="40"></iframe> </div>

在这个div中,放置了两个iframe。这两个iframe的名称分别与JavaScript函数中设置的target属性相对应。这样,表单数据就会被发送到这两个iframe中,而用户则不会看到这些iframe。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485