在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函数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隐藏起来。可以通过设置样式属性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。