How to post all the form values on button Click using Jquery and redirecting to other page after success post
I have got below long html generated by .NET code.
<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>
In above html I have got one button (see below code taken from above html) from which I want to post all the form values to other page and then it will redirected to another page on successfull ajax post call.
<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;" />
Below is Jquery I am trying to write but getting failed.
$(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();
});
});
Please suggest what wrong I am doing as I am not able to post all the values.
Note: All the values in dropdown are filled using jquery on the basis of other dropdown selection.
I notice the selects ddo oes not have a name attribute which is needed for serialization of form elements.
<select class="isSelect" validid="12" id="tour_whereStay" >
<select id="car_title" validid="1" class="isSelect">
加载中,请稍侯......
精彩评论