gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:07:26 25 4
gpt4 key购买 nike

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

最佳答案

当用户单击submit按钮时,会发生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 tag属性中编写的内容相当于以下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事件处理函数,提交表单的唯一方法是从函数返回,这意味着停止它并从调用它的位置继续执行。当您在函数中更改页面的window.location属性时,会立即发生重定向,因此函数甚至不会立即中断JavaScript执行,并且新页面开始加载,当然,表单提交不能传递任何数据;
所以,你必须
提交表单(如果数据有效)-- return true;
不知何故,从提交表单的页面重定向(这意味着,在另一个页面继续执行JS代码)。
还有。。。这是不可能的。
发送表单后无法继续执行JS代码,因为:
事件处理程序函数已返回。这意味着它被停止了。
表单已发送,另一页正在加载。上一页的JS代码丢失,无法再执行。
这意味着,您不能影响正在从已开始加载的页(以同步模式)加载的页的行为。
你不能让新页面重定向到你想要的页面(“谢谢”一个)。
通常的表单发送只是加载一个带有附加参数的新页面。你不能修改网页上的链接所跟踪的网页;
不管怎样,还是有几种方法可以达到你的目的:
如果您拥有提交表单的页面,则可以只接收表单的数据并立即发送重定向头。例如,通过服务器端的PHP,如果页面不是您的(您既不能修改服务器,也不能修改页面,也不能修改服务器端的任何内容),那么您必须以稍微不同的方式处理表单:使用框架或浮动框架,或者通过javascript代码本身将数据加载到框架中,或者从表单页面所在的同一服务器加载您有权修改和修改的另一个页面。例如:在一个框架中,创建一个用户实际输入数据的表单;在另一个框架中,创建另一个表单,该表单包含与第一个表单相同但隐藏的字段;不要提交第一个表单,而是将数据从第二个表单传递到第二个表单,然后 return;第二个表单;将第一个框架(或整个页面)重定向到“谢谢”页面;第一帧甚至可以隐藏(CSS: return true;)——这不会影响功能。使用AJAX。这是一种特殊的HTTP请求技术(提交表单!)不重新加载实际页面的javascript代码。如果您尝试将数据发送到externalURLHere页(如果不是您的页),则可能会出现一些问题。如果是,您可以在服务器上创建一个“路由器”页,它将接收表单发送的数据并将其路由到目标externalURLHere页。你甚至可以…不用AJAX。只需制作路由器页面(当我说“页面”时,我主要指的是一个PHPscript,或者另一个cgi技术),它还将显示“谢谢”HTML文档。。。
我已经尽力做出尽可能完整的回答,我希望这能有所帮助。
对不起我的英语。
P.P.S.我关于堆栈溢出的第一个答案——我可能做错了,对不起。

关于javascript - 重定向到任何页面并提交表单详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17709676/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com