重定向到任何页面并提交表单详细信息

Redirect to any page and submit form details

本文关键字：提交 表单 详细信息 任何页 重定向      更新时间：2023-09-26

我希望使用method="POST"将表单详细信息提交到外部URL，然后在成功完成表单后将用户重定向到"谢谢"页面。

我的示例HTML/Javascript如下，但是页面并没有按预期重定向到Google.com。如有任何帮助，我们将不胜感激！

HTML:

<form action="externalURLhere" method="post" name="theForm"    
id="theForm" style="margin-bottom:0px;padding:2px;background-color:#e0e0e0;" onSubmit="return 
MM_validateForm(); return redirect();">

JavaScript:

function MM_validateForm() {
    if ( !jQuery('#theForm #FirstName').val() ) {
        alert('Please input your first name.');
        jQuery('#theForm #FirstName').focus();
        return false;
    }
    if ( !jQuery('#theForm #LastName').val() ) {
        alert('Please input your last name.');
        jQuery('#theForm #LastName').focus();
        return false;
    }
    if ( !jQuery('#theForm #daytimephone').val() ) {
        alert('Please input your phone number.');
        jQuery('#theForm #daytimephone').focus();
        return false;
     }
    if ( !jQuery('#theForm #Email').val() ) {
        alert('Please input your email.');
        jQuery('#theForm #Email').focus();
        return false;
    }
    if ( !jQuery('#theForm #BID').val() ) {
        alert('Please select your preferred campus.');
        jQuery('#theForm #BID').focus();
    return false;
    }
    if ( !jQuery('#theForm #programs').val() ) {
        alert('Please select your preferred program.');
        jQuery('#theForm #programs').focus();
        return false;
    }
    if ( !jQuery('#theForm #How_Heard').val() ) {
        alert('Please select how you heard about us.');
        jQuery('#theForm #How_Heard').focus();
    return false;
    }
return true;
}
// ]]></script>
<script type="text/javascript">
function redirect() {
    window.location = "www.google.com";
    return false;
}
</script>

当用户点击提交按钮时，会发生onsubmit事件，根据事件绑定函数的返回值，表单会提交（返回true）或不提交（返回false）；可以使用HTML:将函数绑定到事件

  • <form onSubmit="if(/*some validation here*/){return true;} else {return false;}"></form>

或者在javascript脚本中：

  • form1.onsubmit=function(){if(/*some validation here*/){return true;} else {return false;}}

一般来说，这并不重要
你知道，函数的主体被执行，直到"返回"发生。然后它立即停止，并将返回值传递给函数调用程序。因此，您在onSubmit="HTML标记属性中所写的内容相当于以下JS代码：

form1.onsubmit=function(){
    testPassed=validate();
    return testPassed;
    someValueRedirectFunctionReturns=redirect();
    return someValueRedirectFunctionReturns;
}

因此，您可以看到，无论表单数据测试是否通过，因为validate（）函数的返回值（如果表单正常，则为true，如果用户输入了错误数据，则为false）会立即在事件函数中返回。因此，您的重定向（）函数无法发生，因为onsubmit事件处理程序函数已停止并返回值

要使此工作，您应该修改代码：

form1.onsubmit=function(){
    if(!validate())
        return false; //test failed, form is not passed, no need to redirect to "thank you page".
    else
        redirect();
}

因此，如果表单验证测试通过，重定向函数将被调用。就在这里，我们遇到了另一个问题
如果定义了onsubmit事件处理程序函数，那么提交表单的唯一方法是return true;——从函数返回，意味着停止它并从调用它的位置继续执行。当你在函数中更改页面的window.location属性时，重定向会立即发生，所以函数甚至不会return;——JavaScript执行会立即中断，新页面开始加载——当然，表单提交不能传递任何数据

所以，你必须

  1. 提交表单（如果数据有效）--return true;
  2. 以某种方式重定向（这意味着在另一个页面上继续执行JS代码）从提交表单的页面

而且。。。这是不可能的
表单发送后，您无法继续执行JS代码，因为：

  • 事件处理程序函数已返回。这意味着它被停止了
  • 表单已发送，并且正在加载另一个页面。上一页的JS代码丢失，无法再执行
  • 这意味着，不能影响正在从已开始加载的页面加载（在同步模式下）的页面的行为。而且你不能让新页面重定向到你想要的页面（"谢谢"一个）。通常的表单发送只是加载一个带有附加参数的新页面。例如，你不能修改你页面上的链接所指向的页面

不管怎样，仍然有几种方法可以实现你想要的：

  • 如果您拥有提交表单的页面，您可能只需接收表单的数据并立即发送重定向标头。例如，通过服务器端的PHP
  • 如果页面不是您的页面（您既不能修改服务器，也不能修改页面，也不能在服务器端修改任何内容），那么您必须以稍微不同的方式处理表单：
    • 使用帧或浮动帧li>在一个框架中，制作一个用户实际输入数据的表单
    • 在另一个框架中，制作另一个表单，该表单包含与第一个相同的字段，但隐藏了字段
    • 不提交第一个表单，而是将数据从传递到第二个表单，并将submit()传递给第二个
    • 将第一帧（或整个页面）重定向到"谢谢"页面
    • 第一帧甚至可能被隐藏（CSS:display:none）——这不会影响功能
  • 使用AJAX。这是一种从javascript代码发出HTTP请求（提交表单！）的特殊技术，而无需重新加载实际页面。如果你试图将数据发送到externalURLHere页面，如果它不是你的，可能会出现一些问题。如果是这样，您可以在服务器上创建一个"路由器"页面，该页面将接收表单发送的数据，并将其路由到目标externalURLHere页面。然后你甚至可能
  • 不要使用AJAX。只需制作路由器页面（当我说"page"时，我主要指的是PHPscript或其他cgi技术），它也会显示"谢谢"HTML文档
  • 等等…

我试着给出尽可能完整的答案，我希望它能有所帮助。

第页。S.对不起我的英语
P.P.S.我对Stack Overflow的第一个回答——对不起，我可能做错了什么。

如果没有完整的代码和更具体的要求，很难确定它不工作的确切原因。

例如，如果您提交到一个php文件，您可以使用在该外部php文件中进行重定向

     header('Location: http://www.example.com/');

如果你只是简单地提交到另一个html文件，你可以使用Ajax：如何使用Ajax重定向？

尝试添加协议

window.location = "http://google.com";
相关文章：