Question

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

我的示例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>

Answer 1

当用户点击提交按钮时，会发生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）立即返回< em>在事件函数中。因此，您的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 propterty时，立即进行重定向，因此该函数甚至不会return; - JavaScript执行立即中断，并且新页面开始加载 - 当然，没有数据可以通过表格提交传递;

所以，你必须

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

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

事件处理函数已返回。这意味着它已停止。
表单已发送，另一页面正在加载。上一页的JS代码丢失了，不能再执行了。
这意味着，您不能影响您从页面加载（在同步模式下）已开始加载的页面的行为。并且您不能将新页面重定向到您想要的页面（“谢谢”）。通常的表单发送只是加载带有附加参数的新页面。 E. g。您无法修改页面上链接所遵循的页面;

无论如何，仍然有几种方法可以实现你想要的东西：

如果您拥有提交表单的页面，您可能只是收到表单的数据并立即发送重定向标题。例如，通过服务器端的PHP。
如果页面不是你的（你既不能修改服务器，也不能修改页面，也不能修改服务器端的任何内容），那么你有以稍微不同的方式处理表单：
- 使用框架或浮动框架，将数据加载到框架中javascript代码本身，或者通过加载另一个页面（来自表单页面所在的同一服务器），您有权修改和修改它。 E. g.:
  1. 在一个框架中，创建一个用户实际输入数据的表单;
  2. 在另一个框架中，创建另一个包含与第一个框架相同的字段的表单，但是隐藏的;
  3. 不要提交第一个表单，而是将数据传递给第二个表单，submit()传递第二个表单;
  4. 重定向第一个表单（或
  6. 第一帧甚至可能被隐藏（CSS：display:none） - 这不会影响功能。
  7. 使用 AJAX 。这是一种特殊的技术，可以从javascript代码发出HTTP请求（提交表单！），而无需重新加载实际页面。如果您尝试将数据发送到externalURLHere页面（如果它不是您的），则可能存在一些问题。如果是这样，您可以在服务器上创建“路由器”页面，该页面将接收表单发送的数据并将其路由到目标externalURLHere页面。然后你甚至可以......
  8. 不要使用AJAX。只需创建路由器页面（当我说“ page ”时，我主要是指 PHPscript 或其他cgi技术），它还会显示“谢谢”HTML文档。
  9. 依此类推......

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

P上。 S.对不起我的英语。
P. P. S.我在Stack Overflow上的第一个答案 - 我可能做错了什么，抱歉。

Answer 2

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

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

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

如果您只是提交到另一个html文件，则可以使用Ajax：How to redirect using AJAX?

Answer 3

尝试添加协议

window.location = "http://google.com";

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

3 个答案: