如何在Ajax表单提交后将用户重定向到另一个页面?

时间:2013-07-19 14:50:23

标签: java html ajax forms

我在成功完成表单后将用户重定向到感谢页面时遇到问题。结果是,在表单提交后,它会转到空白页面(https://cunet.sparkroom.com/Sparkroom/postLead)...我需要将其重定向到感谢页面,同时将表单详细信息提交到“表单操作”中的URL。

HTML代码:

<form action="https://cunet.sparkroom.com/Sparkroom/postLead/" method="post" name="theForm" 
id="theForm" onSubmit="return MM_validateForm();" >
...
</form>

Ajax代码:

<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
    $('#theForm').ajaxForm(function() { 
    window.location.href = "I want the user to be redirected to this page";
});
</script> 

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>

有谁知道我做错了什么?我需要表单将数据提交到URL,然后将用户重定向到“谢谢”页面,此时此刻完全没有发生。

4 个答案:

答案 0 :(得分:4)

尝试

window.location.href = "http://www.msdn.com";

答案 1 :(得分:2)

尝试:

$('#theForm').ajaxForm(function() { 
 success : function(){
    window.location.href = "Url to redirect here in the success option";
 }
});

答案 2 :(得分:0)

成功发布表单后,有两种方法可以重定向用户。

1)您可以在ajax提交中放置一个成功事件,您可以在其中简单地将用户重定向到thankyou页面。

2)完成表单后期处理后使用服务器端功能    对于PHP中的Ex:

header("Location: http://thankyoupage.html");

答案 3 :(得分:0)

您可以使用jquery来提交帖子,因此您必须取消表单中的操作

    <form  name="theForm" id="theForm" >

只需为提交按钮提供课程或ID

即可
    <submit class='submitTheForm'....>

代码就像这样......你只需要包含所有正确名称的表单变量。

然后在MM_validateForm()

的底部添加jquery post请求
    if ( !jQuery('#theForm #How_Heard').val() ) {
    alert('Please select how you heard about us.');
    jQuery('#theForm #How_Heard').focus();
    return false;
    }

    $.post("https://cunet.sparkroom.com/Sparkroom/postLead/",
{
FirstName:FirstName,
LastName:LastName
    ...
    ...
},
function(){
    window.location.href = 'thank you page'
    }
});

最后在单击提交按钮时调用函数MM_validateForm()

    $('.submitTheForm').click( function(){
    MM_validateForm();
    });

来自http://api.jquery.com/jQuery.post/的jquery帖子,其余来自个人经历。