如何使用Jquery在按钮单击上发布所有表单值，并在成功发布后重定向到其他页面
下面是由.NET代码生成的长html如何使用Jquery在按钮单击上发布所有表单值，并在成功发布后重定向到其他页面,jquery,Jquery,下面是由.NET代码生成的长html <html> <title>Booking Form</title> <body id="b2b"> <form name="aspnetForm" method="post" action="index.aspx" id="aspnetForm"> <div> <table class="stayingIn" width="100%" border="0" cel
<html>
<title>Booking Form</title>
<body id="b2b">
<form name="aspnetForm" method="post" action="index.aspx" id="aspnetForm">
<div>
<table class="stayingIn" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="section topsection">
<span class="mandatoryExplanation"><span class="asterisk">*</span> Mandatory Fields</span>
<h2>
<img src="/images/b2b/titles/aboutthetours.gif" alt="About The Tours" /></h2>
</td>
</tr>
<tr>
<td class="type">
<label for="tour_whereStay" id="lblvalid12">
I will be staying in <span class="asterisk">*</span></label></td>
<td class="field">
<input name="ctl00$MainContent$TourBookingEnquiry$tour_Location" type="hidden" id="ctl00_MainContent_TourBookingEnquiry_tour_Location" />
<select class="isSelect" validid="12" id="tour_whereStay" >
<option value="">Please Select</option>
<option value="Dubai">Dubai</option>
<option value="AbuDhabi">Abu Dhabi</option>
<option value="Fujairah">Fujairah</option>
</select>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<ul class="numPsgrCols plain clearfix">
<li class="numPsgrField">
<label for="car_guestAdults" id="lblvalid15">
Adults <span class="asterisk">*</span></label>
<br />
<select class="isSelect" id="car_guestAdults" validid="15">
<option value="">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br />
<span>(13 and older)</span> </li>
<li class="numPsgrField">
<label for="car_guestChildren">
Children</label>
<br />
<select id="car_guestChildren">
<option value="">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br />
<span>(6-12 years)</span> </li>
<li class="numPsgrField last">
<label for="car_guestInfants">
Infants</label>
<br />
<select id="car_guestInfants">
<option value="">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br />
<span>(5 and younger)</span> </li>
</ul>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="section">
<h2>
<img src="/images/b2b/titles/aboutyou.gif" alt="About You" /></h2>
</td>
</tr>
<tr>
<td class="type">
<label for="car_title" id="lblvalid1">
Title <span class="asterisk">*</span></label></td>
<td class="field">
<select id="car_title" validid="1" class="isSelect">
<option value="" selected>-</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
</td>
</tr>
<tr>
<td class="type">
<label for="car_firstname" id="lblvalid2">
First Name <span class="asterisk">*</span></label></td>
<td class="field">
<ul class="aboutYouCols plain clearfix">
<li class="field">
<input class="text isBlank isAlphabet" validid="2" type="text" id="car_firstname"
maxlength="255" />
</li>
<li class="type">
<label for="car_email" id="lblvalid7">
Email <span class="asterisk">*</span></label>
</li>
<li class="field last">
<input class="text isEmail" validid="7" type="text" id="car_email" maxlength="255" />
</li>
</ul>
</td>
</tr>
<tr>
<td class="type">
<label for="car_lastname" id="lblvalid3">
Last Name <span class="asterisk">*</span></label></td>
<td class="field">
<ul class="aboutYouCols plain clearfix">
<li class="field">
<input class="text isBlank isAlphabet" validid="3" type="text" id="car_lastname"
maxlength="255" />
</li>
<li class="type">
<label for="car_email_confirm" id="lblvalid23">
Confirm Email <span class="asterisk">*</span></label>
</li>
<li class="field last">
<input class="text isEmail isEqual_car_email" validid="23" type="text" id="car_email_confirm"
maxlength="255" />
</li>
</ul>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="section">
<input type="image" name="ctl00$MainContent$TourBookingEnquiry$rfp_Booking_submit" id="ctl00_MainContent_TourBookingEnquiry_rfp_Booking_submit" class="submit over2" src="/images/b2b/buttons/submit_off.gif" alt="Submit" style="border-width:0px;" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
预订表
*必填字段
我将呆在家里*
请选择
迪拜
阿布扎比
富贾伊拉
-
成年人*
-
0
1.
2.
（13岁及以上）
-
儿童
-
0
1.
2.
（6-12年）
-
婴儿
-
0
1.
2.
（5岁及以下）
头衔*
-
先生
夫人
太太
错过
博士
教授。
名字*
-
-
电子邮件*
-
姓*
-
-
确认电子邮件*
-
<input type="image" name="ctl00$MainContent$TourBookingEnquiry$rfp_Booking_submit" id="ctl00_MainContent_TourBookingEnquiry_rfp_Booking_submit" class="submit over2" src="/images/b2b/buttons/submit_off.gif" alt="Submit" style="border-width:0px;" />
$(document).ready(function()
{
$("#<%= rfp_Booking_submit.ClientID %>").click(function(event)
{
$("#aspnetForm").submit(function(event)
{
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
$inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
$inputs.attr("disabled", "disabled");
alert("form data-"+serializedData);
// fire off the request to FormTest.html
$.ajax({
url: "Email-TourBookingEnquiry.aspx",
type: "post",
data: serializedData,
// callback handler that will be called on success
success: function(response, textStatus, jqXHR)
{
// log a message to the console
console.log("Hooray, it worked!");
location.href = "Thank-You.aspx";
},
// callback handler that will be called on error
error: function(jqXHR, textStatus, errorThrown)
{
// log the error to the console
console.log("The following error occured: "+ textStatus, errorThrown);
},
// callback handler that will be called on completion
// which means, either on success or error
complete: function()
{
// enable the inputs
$inputs.removeAttr("disabled");
}
});
// prevent default posting of form
event.preventDefault();
});
});
$（文档）.ready（函数（）
{
$（“#”）单击（函数（事件）
{
$（“#aspnetForm”）.submit（函数（事件）
{
//设置一些局部变量
var$form=$（此）；
//让我们选择并缓存所有字段
$inputs=$form.find（“输入、选择、按钮、文本区域”）；
//序列化表单中的数据
serializedData=$form.serialize（）；
//让我们在ajax请求期间禁用输入
$inputs.attr（“禁用”、“禁用”）；
警报（“表单数据-”+序列化数据）；
//启动对FormTest.html的请求
$.ajax({
url:“电子邮件tourbookingquiry.aspx”，
类型：“post”，
数据：序列化数据，
//成功时将调用的回调处理程序
成功：函数（响应、文本状态、jqXHR）
{
//将消息记录到控制台
log（“万岁，成功了！”）；
location.href=“Thank You.aspx”；
},
//将在发生错误时调用的回调处理程序
错误：函数（jqXHR、textStatus、errorshown）
{
//将错误记录到控制台
log（“发生以下错误：”+textStatus，errorshown）；
},
//完成时将调用的回调处理程序
//也就是说，不管是成功还是失败
完成：函数（）
{
//启用输入
<select class="isSelect" validid="12" id="tour_whereStay" >
<select id="car_title" validid="1" class="isSelect">