Ajax表单提交页面重定向
Ajax form submission page redirect
我有一个使用JQuery和AJAX提交的HTML表单。
成功提交后,它会加载一个模态,然后重定向到另一个页面。
我想做的是检查其中一个表单字段中输入的数据,然后根据这个值重定向。
下面是我的JS文件。我设置了"if"语句,但不管输入了什么,页面都会重定向到第一个选项。
magic.js:-
// magic.js
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
$('.form-group').removeClass('has-error'); // remove the error class
$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'superheroAlias' : $('input[name=superheroAlias]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true,
success : function showModal() {
$( "#myModal .modal-content" ).html();
$('#myModal').modal('show');
}
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if ( ! data.success) {
// handle errors for name ---------------
if (data.errors.name) {
$('#name-group').addClass('has-error'); // add the error class to show red input
$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
}
// handle errors for email ---------------
if (data.errors.email) {
$('#email-group').addClass('has-error'); // add the error class to show red input
$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
}
// handle errors for superhero alias ---------------
if (data.errors.superheroAlias) {
$('#superhero-group').addClass('has-error'); // add the error class to show red input
$('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$('form').append('<div class="alert alert-success">' + data.message + '</div>');
if(formData.name="craft") {window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6SLZSSYLDRM2A";
}, 3000);}
else if(formData.name="business"){window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FGXPCRVAXJC8J";
}, 3000);}
else{window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WH8HB3M9S3GU2";
}, 3000);}
/* $( "#myModal .modal-content" ).html('test');
$('#myModal').modal('show');*/
// usually after form submission, you'll want to redirect
// window.location = '/thank-you'; // redirect a user to another page
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
我认为我的变量名是个问题,但我不能确定。
好吧,在"if"语句中应该是==,而不是=
尝试:
// magic.js
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
event.preventDefault();
$('.form-group').removeClass('has-error'); // remove the error class
$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'superheroAlias' : $('input[name=superheroAlias]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true,
success : function showModal() {
$( "#myModal .modal-content" ).html();
$('#myModal').modal('show');
if ( ! data.success) {
// handle errors for name ---------------
if (data.errors.name) {
$('#name-group').addClass('has-error'); // add the error class to show red input
$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
}
// handle errors for email ---------------
if (data.errors.email) {
$('#email-group').addClass('has-error'); // add the error class to show red input
$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
}
// handle errors for superhero alias ---------------
if (data.errors.superheroAlias) {
$('#superhero-group').addClass('has-error'); // add the error class to show red input
$('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$('form').append('<div class="alert alert-success">' + data.message + '</div>');
if(formData.name=="craft") {window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6SLZSSYLDRM2A";
}, 3000);}
else if(formData.name=="business"){window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FGXPCRVAXJC8J";
}, 3000);}
else{window.setTimeout(function () {
location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WH8HB3M9S3GU2";
}, 3000);}
}
}
});
});
});
相关文章:
- 如何根据所选选项值重定向表单操作
- PHP表单提交和重定向
- 表单提交时重定向页面
- 根据答案重定向表单
- ajax表单提交后从客户端重定向
- 模拟隐藏表单提交&使用JavaScript重定向以实现安全支付
- 高级表单提交-单选、复选框和重定向
- 如何使用单击此处提交重定向表单
- Safari在重定向/表单提交时暂停所有动画
- 防止在没有ajax的情况下提交后重定向表单
- 如何重置表单提交事件的 event.preventDefault()
- 重定向表单失败
- 提交后重定向表单
- 在提交时使用JavaScript重定向表单插件
- JavaScript重定向表单提交
- 我需要提交表单,并在一个花哨的框中重定向表单提交的父页面
- 如何使用jquery提交和重定向表单?
- 使用下拉字段中的值重定向表单提交上的页面
- 重定向表单用户提交时,基于无线电选择仅
- 我试图在表单提交到一个新页面后,根据用户选择的多个选项(Javascript.html)重定向表单