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">

How to post all the form values on button Click using Jquery and redirecting to other page after success post

精彩评论

关注公众号

热门标签

图文推荐

How to post all the form values on button Click using Jquery and redirecting to other page after success post

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：