2

我希望使用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>
4

3 回答 3

2

当用户点击提交按钮时，会发生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）立即在事件函数中返回. 因此，您的 redirect() 函数无法发生，因为 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。
  • 如果页面不是您的（您既不能修改服务器，也不能修改页面，也不能修改服务器端的任何内容），那么您必须以稍微不同的方式处理表单：
    • 使用框架或浮动框架，通过 javascript 代码本身将数据加载到框架中，或者通过加载另一个页面（来自表单页面所在的同一服务器），您有权修改和修改它。例如：
      1. 在一个框架中，制作一个用户实际输入数据的表单；
      2. 在另一个框架中，制作另一个表格，其中包含与第一个相同的字段，但隐藏的字段；
      3. 不要提交第一个表单，而是将数据从第二个表单传递到第二个表单submit()；
      4. 将第一帧（或整个页面）重定向到“谢谢”页面；
      5. 第一帧甚至可能被隐藏（CSS: display:none）——这不会影响功能。
    • 使用AJAX。这是一种从 javascript 代码发出 HTTP 请求（提交表单！）而不重新加载实际页面的特殊技术。如果您尝试将数据发送到 externalURLHere 页面（如果不是您的），则可能会出现一些问题。如果是这样，您可以在您的服务器上创建一个“路由器”页面，该页面将接收表单发送的数据并将其路由到目标 externalURLHere 页面。那么你甚至可以...
    • 不要使用 AJAX。只需制作路由器页面（当我说“页面”时，我主要指的是PHPscript或其他 cgi 技术），它还将显示“谢谢”HTML 文档。
    • 等等...

我已经尽力做出尽可能完整的答案，我希望它有所帮助。

PS对不起我的英语。
PPS 我在 Stack Overflow 上的第一个答案——我可能做错了，抱歉。

于 2013-07-17T21:53:36.257 回答
0

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

例如，如果您要提交到 php 文件，则可以使用以下方法在该外部 php 文件中进行重定向：

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

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

于 2013-07-17T20:50:11.970 回答
0

尝试添加协议

window.location = "http://google.com";
于 2013-07-17T21:05:28.793 回答