Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

A Code Example: Tab Box with Search Forms

0 Answers 146 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
TazDeveloper
Top achievements
Rank 1
TazDeveloper asked on 23 Dec 2011, 12:55 PM
TravelSearch.zip
I have been working with Kendo for a little over a week, and it's been great so far.  In the forums and through the UserVoice we have all been asking for code examples, so I thought I would share the following example, that I put together from my real world project.

A little note about the limited documentation and examples. If you have questions, ask them in the forums or open a support ticket. My experience has been, that the KendoUI staff has been quick at responding, and they have provided quality answers to all my questions.  We can all learn from the questions you might ask in the forums.

The Example:
This is a single html page with a tabstrip and and 3 forms (Air, Car and Hotel Searches) for a client travel search.  It combines a few of the widgets, so it might be helpful past the examples in the KendoUI package.

First, you will see a lot of repetitive functions (like the date processing for the calendars).  This is because the HTML form was created from three separate HTML pages.  I combined them into a single tab strip.  To save me time, I just did a lot of cutting and pasting.  I also think it makes it easier to follow what is going on.  I also went back in and tried to add comment blocks that would make it easier to find things. So, this is not an optimized example!  The data sources are local.  I only copied some data into the sources.  My real world project uses remote data.  Since I wanted this example to just run, I created partial data.  Also, I only added validation to the Air Search form.  I got lazy in producing this example.  My apologies.

I tested this in Firefox, IE and Chrome and everything seemed to work.

I hope this helps someone getting started...

Cheers,
        Paul


One note:  To get this to work, you need to modify kendo.numerictextbox.js to get it to work properly.  There is a typo in the one provided.  See http://www.kendoui.com/forums/ui/numeric-textbox/numerictextbox-in-a-mvc-project.aspx

The semicolon after the line element = that.element needs to be changed to a comma.
Change Required in kendo.numerictextbox.js 

Curent:

enable: function(enable) {
            var that = this,
                text = that._text,
                element = that.element;
                wrapper = that._inputWrapper,
                upArrow = that._upArrow,
                downArrow = that._downArrow;
....

Should Be:
enable: function(enable) {
            var that = this,
                text = that._text,
                element = that.element,
                wrapper = that._inputWrapper,
                upArrow = that._upArrow,
                downArrow = that._downArrow;
....





The HTML Page.  Download is attached as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Untitled 1</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.core.js"></script>
        <script src="js/kendo.fx.js"></script>
        <script src="js/kendo.popup.js"></script>
        <script src="js/kendo.calendar.js"></script>
        <script src="js/kendo.datepicker.js"></script>
        <script src="js/kendo.data.js"></script>
        <script src="js/kendo.list.js"></script>
        <script src="js/kendo.autocomplete.js"></script>
        <script src="js/kendo.dropdownlist.js"></script>
        <script src="js/kendo.combobox.js"></script>
        <script src="js/kendo.numerictextbox.js"></script>
        <script src="js/kendo.tabstrip.js"></script>
        <script src="js/kendo.validator.js"></script>
        <link href="styles/kendo.common.css" rel="stylesheet" />
        <link href="styles/kendo.blueopal.css" rel="stylesheet" />
        <style>
            input.OriginInput {
                font-size: 12px !important;
            }
            input.DestinationInput {
                font-size: 12px !important;
            }
            .TravelLabel {
                font-size: 12px !important;
                color: black;
                font-weight: bold;
            }
            .TravelTabLabel {
                font-size: 14px !important;
                color: Gray;
                font-weight: normal;
                padding-right: 15px;
                font-family: verdana, arial;
            }
            .TravelSearchGood {
                font-size: 12px !important;
                font-family: verdana, arial;
                padding: 5px 5px 5px 5px;
                color: green;
            }
            .TravelSearchError {
                font-size: 12px !important;
                font-family: verdana, arial;
                padding: 5px 5px 5px 5px;
                color: red;
            }
            .TravelFont {
                font-size: 12px !important;
            }
            .TravelTab {
                width: 465px;
            }
            Table.HotelSearchTable {
                background-position: right bottom;
                background-repeat: no-repeat;
                font-family: verdana, arial;
                width: 435px;
                height: 250px;
            }
            Table.CarSearchTable {
                background-position: right center;
                background-repeat: no-repeat;
                font-family: verdana, arial;
                width: 435px;
                height: 250px;
            }
            Table.AirSearchTable {
                background-position: right center;
                background-repeat: no-repeat;
                font-family: verdana, arial;
                width: 435px;
                height: 250px;
            }
        </style>
        <script>
            Date.prototype.addDays = function(days) {
                this.setDate(this.getDate() + days);
            }
            var validatorAir;
            var startAir;
            var endAir;
            var startCar;
            var endCar;
            var startHotel;
            var endHotel;
            var maxStartDate;
            var minStartDate;
            var minEndDate;
            var maxEndDate;
 
            ////////////////////////////////////////////////////////////////////////////////////////////////////////////
            // Calendar Date Event Handlers
 
            function startChangeAir() {
                $("#MessageAirError").html("");
                if(endAir.value() <= this.value()) {
                    endDate = new Date(this.value());
                    endDate.addDays(3);
 
                    if(endDate > endAir.max()) {
                        endAir.value(new Date(endAir.max()));
                    } else {
                        endAir.value(new Date(endDate));
                    }
 
                }
            }
 
            function endChangeAir() {
                if(endAir.value() < startAir.value()) {
                    $("#MessageAirError").html("The return date is prior to the departure date.");
 
                } else {
                    $("#MessageAirError").html("");
                }
            }
 
            function startChangeCar() {
                $("#MessageCar").html("");
                if(endCar.value() <= this.value()) {
                    endDate = new Date(this.value());
                    endDate.addDays(3);
 
                    if(endDate > endCar.max()) {
                        end.value(new Date(endCar.max()));
                    } else {
                        endCar.value(new Date(endDate));
                    }
 
                }
            }
 
            function endChangeCar() {
                if(endCar.value() < startCar.value()) {
                    $("#MessageCar").html("The return date is prior to the pick-up date.");
 
                } else {
                    $("#MessageCar").html("");
                }
            }
 
            function startChangeHotel() {
                $("#MessageHotel").html("");
                if(endHotel.value() <= this.value()) {
                    endDate = new Date(this.value());
                    endDate.addDays(3);
 
                    if(endDate > endHotel.max()) {
                        endHotel.value(new Date(endHotel.max()));
                    } else {
                        endHotel.value(new Date(endDate));
                    }
 
                }
            }
 
            function endChangeHotel() {
                if(endHotel.value() < startHotel.value()) {
                    $("#MessageHotel").html("The check-out date is prior to the check-in date.");
 
                } else {
                    $("#MessageHotel").html("");
                }
            }
        </script>
        <script>
            $(document).ready(function() {
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
                //Data Sources
 
                //////////////////////////////////////////
                var AirLocData = [{text : "Aberdeen,  SD ", value : "ABR"}, {text : "ABR (Aberdeen, SD )",value : "ABR" }];
                 
                //////////////////////////////////////////
                var CarLocData = [{ text : "Aberdeen,  SD ",value : "ABR"}, {text : "ABR (Aberdeen, SD )",value : "ABR" }];
 
                //////////////////////////////////////////
                var ClassOfServiceData = [{ text : "Economy", value : "E"}, {text : "Business", value : "B" }, {text : "First", value : "F" }];
 
                //////////////////////////////////////////
                //Empty Data is used to make AutoComplete
                //a standard input with the same look and feel
                var emptydata = [];
 
                //////////////////////////////////////////
                var ClassData = [{text : "No preference",value : "*"}, {text : "Compact",value : "C"}, {text : "Economy",value : "E"}, {text : "Full size", value : "F" }, {text : "Intermediate",  value : "I"}, { text : "Luxury",value : "L" }, {text : "Mini",value : "M"}, {text : "Premium",value : "P"}, {text : "Standard", value : "S" }, {text : "Special",value : "X"}];
                 
                //////////////////////////////////////////
                var CarData = [{text : "No preference", value : "*" }, {text : "2 door car",value : "B" }, {text : "2 door/4 door", value : "C" }, {text : "4 door car",value : "D" }, {text : "4 wheel drive", value : "F" }, {text : "All Terrain",value : "J"}, {text : "Truck", value : "K" }, {text : "Limousine", value : "L" }, {text : "Pickup",value : "P" }, {text : "Recreation",value : "R" }, {text : "Sports car",value : "S" }, {text : "Convertible",value : "T"}, {text : "Van",value : "V"}, {text : "Wagon", value : "W"}, {text : "Special",value : "X" }];
 
                //////////////////////////////////////////
                var TransData = [{text : "No preference",value : "*"}, {text : "Automatic", value : "A"}, {text : "Manual", value : "M"}];
 
                //////////////////////////////////////////
                var AirData = [{text : "No preference", value : "*"}, { text : "Air conditioning",value : "R"}, {text : "No air conditioning", value : "R"}];
 
                //////////////////////////////////////////
                var CountryData = [{ text : "United States",value : "US"}, {text : "Albania",   value : "AL"}, {text : "Algeria",value : "DZ"}, {text : "American Samoa",value : "AS"}];
 
                //////////////////////////////////////////
                var AreaData = [{text : "No Preference",value : ""}, {text : "Airport", value : "A" }, {text : "Downtown",value : "D"}, {text : "East", value : "E"}, { text : "North", value : "N" }, {text : "Resort",value : "R"}, {text : "South",value : "S"}, {text : "West",value : "W"}];
 
                //////////////////////////////////////////
                var OccupancyData = [{text : "1",value : "1"}, {text : "2 or more", value : "2" }];
 
                //////////////////////////////////////////
                var TimeValues = [{ text : "Anytime",value : "Any"}, {value : "0000",text : "12:00AM"}, {value : "0100",text : "01:00AM"}, {value : "0200", text : "02:00AM"}, {value : "0300", text : "03:00AM"}, {value : "0400", text : "04:00AM"}, {value : "0500", text : "05:00AM"}, {value : "0600", text : "06:00AM"}, {value : "0700", text : "07:00AM"}, {value : "0800",text : "08:00AM"}, {value : "0900",text : "09:00AM"}, {value : "1000",text : "10:00AM"}, {value : "1100",text : "11:00AM"}, {value : "1200",text : "12:00PM"}, { value : "1300", text : "01:00PM"}, {value : "1400", text : "02:00PM"}, {value : "1500", text : "03:00PM"}, {value : "1600", text : "04:00PM"}, {value : "1700", text : "05:00PM"}, {value : "1800", text : "06:00PM"}, {value : "1900", text : "07:00PM"}, {value : "2000", text : "08:00PM"}, {value : "2100", text : "09:00PM"}, {value : "2200", text : "10:00PM"}, {value : "2300", text : "11:00PM"}];
                 
                //
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
                //Enable the TabStrip
 
                $("#TriSearchTab").kendoTabStrip({
                    animation : {
                        open : {
                            effects : "fadeIn"
                        }
                    }
 
                });
                //
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
                //AIR CODE
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                //Origin
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#ORIGIN").kendoAutoComplete({
                    minLength : 1,
                    dataTextField : "text",
                    template : '${ data.text }',
                    dataSource : AirLocData
                });
                $("#ORIGIN").data("kendoAutoComplete").list.width(400);
 
                var Origin_combobox = $("#ORIGIN").data("kendoComboBox"), setValue = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        Origin_combobox.value($("#value").val());
                }, setIndex = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var index = parseInt($("#index").val());
                        Origin_combobox.select(index);
                    }
                }, setSearch = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        Origin_combobox.search($("#word").val());
                };
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                //Destination
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#DESTINATION").kendoAutoComplete({
                    minLength : 1,
                    dataTextField : "text",
                    template : '${ data.text }',
                    dataSource : AirLocData
                });
                $("#DESTINATION").data("kendoAutoComplete").list.width(400);
 
                var Destination_combobox = $("#ORIGIN").data("kendoComboBox"), setValue = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        Destination_combobox.value($("#value").val());
                }, setIndex = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var index = parseInt($("#index").val());
                        Destination_combobox.select(index);
                    }
                }, setSearch = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        Destination_combobox.search($("#word").val());
                };
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date of Departure
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                startAir = $("#DepartDate").kendoDatePicker({
                    change : startChangeAir
                }).data("kendoDatePicker");
 
                $("#ReturnTime").kendoDropDownList({
                    dataSource : TimeValues,
                    dataTextField : "text",
                    dataValueField : "value",
                    index : 0
 
                });
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Air Search Date of Return
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                endAir = $("#ReturnDate").kendoDatePicker({
                    change : endChangeAir
                }).data("kendoDatePicker");
 
                $("#DepartTime").kendoDropDownList({
                    dataSource : TimeValues,
                    dataTextField : "text",
                    dataValueField : "value",
                    index : 0
 
                });
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date Processing
                ////////////////////////////////////////////////////////////////////////////////////////////////////
 
                var maxStartDate = new Date();
                var minStartDate = new Date();
 
                maxStartDate.addDays(360);
                minStartDate.addDays(2);
 
                var minEndDate = new Date(minStartDate);
                var maxEndDate = new Date(maxStartDate);
                minEndDate.addDays(1);
                maxEndDate.addDays(1);
 
                startAir.max(maxStartDate);
                startAir.min(minStartDate);
 
                endAir.min(minEndDate);
                endAir.max(maxEndDate);
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Type of Service
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#AIR_CABIN").kendoDropDownList({
                    dataSource : ClassOfServiceData,
                    index : 0
 
                });
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Number of Adults and Children
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#ADULTS").kendoNumericTextBox({
                    format : "#",
                    decimals : 0
 
                });
 
                $("#CHILDREN").kendoNumericTextBox({
                    format : "#",
                    decimals : 0
                });
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Air Search Form Validator
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                validatorAir = $("#AirSearchForm").kendoValidator().data("kendoValidator"), statusError = $("#MessageAirError");
                statusGood = $("#MessageAirGood");
 
                $("#AirSearchButton").click(function() {
                    if(validatorAir.validate()) {
                        statusGood.html("Hooray! Your travel search is opening in a new window!").addClass("valid");
                        statusError.html("").addClass("invalid");
                    } else {
                        statusError.html("Oops! There is invalid data in the form.").addClass("invalid");
                        statusGood.html("").addClass("valid");
                    }
                });
                //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
                //CAR CODE
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                //Car Pick Up
                ////////////////////////////////////////////////////////////////////////////////////////////////////
 
                $("#CAR_PICKUP").kendoAutoComplete({
                    minLength : 1,
                    dataTextField : "text",
                    dataValueField : "value",
                    dataSource : CarLocData
                });
                $("#CAR_PICKUP").data("kendoAutoComplete").list.width(400);
 
                var CarPickUp_combobox = $("#CAR_PICKUP").data("kendoComboBox"), setValue = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        CarPickUp_combobox.value($("#value").val());
                }, setIndex = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var index = parseInt($("#index").val());
                        CarPickUp_combobox.select(index);
                    }
                }, setSearch = function(e) {
                    if(e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        CarPickUp_combobox.search($("#word").val());
                };
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // PickUp Date
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                startCar = $("#PICK_UP_DATE").kendoDatePicker({
                    change : startChangeCar
                }).data("kendoDatePicker");
 
                $("#PICK_UP_TIME").kendoDropDownList({
                    dataSource : TimeValues,
                    dataTextField : "text",
                    dataValueField : "value",
                    index : 0
 
                });
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Drop Off Date
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                endCar = $("#DROP_OFF_DATE").kendoDatePicker({
                    change : endChangeCar
                }).data("kendoDatePicker");
 
                $("#DROP_OFF_TIME").kendoDropDownList({
                    dataSource : TimeValues,
                    dataTextField : "text",
                    dataValueField : "value",
                    index : 0
 
                });
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date Processing
                ////////////////////////////////////////////////////////////////////////////////////////////////////
 
                var maxStartDate = new Date();
                var minStartDate = new Date();
 
                maxStartDate.addDays(360);
                minStartDate.addDays(2);
 
                var minEndDate = new Date(minStartDate);
                var maxEndDate = new Date(maxStartDate);
                minEndDate.addDays(1);
                maxEndDate.addDays(1);
 
                startCar.max(maxStartDate);
                startCar.min(minStartDate);
 
                endCar.min(minEndDate);
                endCar.max(maxEndDate);
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Type of Service
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#CLASS").kendoDropDownList({
                    dataSource : ClassData,
                    index : 0
 
                });
                $("#TYPE").kendoDropDownList({
                    dataSource : CarData,
                    index : 0
 
                });
 
                $("#TRANSMISSION").kendoDropDownList({
                    dataSource : TransData,
                    index : 0
 
                });
                $("#AIR_CONDITIONING").kendoDropDownList({
                    dataSource : AirData,
                    index : 0
 
                });
 
                //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
                //HOTEL CODE
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                startHotel = $("#CHECK_IN_DATE").kendoDatePicker({
                    change : startChangeHotel
                }).data("kendoDatePicker");
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date of Return
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                endHotel = $("#CHECK_OUT_DATE").kendoDatePicker({
                    change : endChangeHotel
                }).data("kendoDatePicker");
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Date Processing
                ////////////////////////////////////////////////////////////////////////////////////////////////////
 
                var maxStartDate = new Date();
                var minStartDate = new Date();
 
                maxStartDate.addDays(360);
                minStartDate.addDays(2);
 
                var minEndDate = new Date(minStartDate);
                var maxEndDate = new Date(maxStartDate);
                minEndDate.addDays(1);
                maxEndDate.addDays(1);
 
                startHotel.max(maxStartDate);
                startHotel.min(minStartDate);
 
                endHotel.min(minEndDate);
                endHotel.max(maxEndDate);
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                //Origin
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#HTL_LOCATION").kendoAutoComplete({
                    minLength : 1,
                    dataTextField : "text",
                    template : '${ data.text }',
                    dataSource : emptydata
                });
                $("#HTL_LOCATION").data("kendoAutoComplete").list.width(400);
 
                $("#LIST_HOTEL_NAME").kendoAutoComplete({
                    minLength : 1,
                    dataTextField : "text",
                    template : '${ data.text }',
                    dataSource : emptydata
                });
                $("#LIST_HOTEL_NAME").data("kendoAutoComplete").list.width(400);
 
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                // Type of Service
                ////////////////////////////////////////////////////////////////////////////////////////////////////
                $("#COUNTRY_CODE").kendoDropDownList({
                    dataSource : CountryData,
                    index : 0
 
                });
                $("#AREA").kendoDropDownList({
                    dataSource : AreaData,
                    index : 0
 
                });
 
                $("#OCCUPANCY").kendoDropDownList({
                    dataSource : OccupancyData,
                    index : 0
 
                });
 
                //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
            });
            //Air Functions
        </script>
        </script>
        <body>
            <div class="TravelTab" id="TriSearchTab">
                <ul>
                    <li class="k-state-active">
                        <span class="TravelTabLabel">Air</span>
                    </li>
                    <li>
                        <span class="TravelTabLabel">Car</span>
                    </li>
                    <li>
                        <span class="TravelTabLabel">Hotel</span>
                    </li>
                </ul>
                <div>
                    <!-- AIR SEARCH -->
                    <form action="/Travel/air.aspx" method="get" target="_blank" id="AirSearchForm">
                        <table class="AirSearchTable">
                            <tr>
                                <td colspan="2"><div class="TravelSearchGood" id="MessageAirGood"></div><div class="TravelSearchError" id="MessageAirError"></div><span  class="k-widget k-tooltip-validation k-invalid-msg" data-for="ORIGIN"><span style="width:100%;" class="k-icon k-warning"></span></span><span  class="k-widget k-tooltip-validation k-invalid-msg" data-for="DESTINATION"><span style="width:100%;" class="k-icon k-warning"></span></span></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">From:</span></td>
                                <td>
                                <input class="OriginInput"  required validationMessage="From: location is a required field!" style="width: 275px;" id="ORIGIN" name="ORIGIN" />
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">To:</span></td>
                                <td>
                                <input class="DestinationInput" validationMessage="To: location is a required field!" required style="width: 275px;" id="DESTINATION" name="DESTINATION" />
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 23px"><span class="TravelLabel">Depart Date:</span></td>
                                <td style="height: 23px">
                                <table>
                                    <tr>
                                        <td>
                                        <input class="TravelFont" style="width: 125px" id="DepartDate" name="DepartDate" value="12/12/2011" />
                                        </td>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="DepartTime" name="DepartTime" value="10:00 AM" />
                                        </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Return Date:</span></td>
                                <td>
                                <table>
                                    <tr>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="ReturnDate" name="ReturnDate" value="12/21/2011" />
                                        </td>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="ReturnTime" name="ReturnTime" value="10:00 AM" />
                                        </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Class of Service:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 100px;" id="AIR_CABIN" name="AIR_CABIN" value="1" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                        <table style="padding-top: 5px;" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding-right: 5px;"><span class="TravelLabel">Adult(s):</span></td>
                                                <td style="padding-right: 5px;">
                                                <input class="TravelFont" style="width: 55px;" id="ADULTS" name="ADULTS" value="2" type="number"
                                                min="1" max="5" step="1" />
                                                </td>
                                            </tr>
                                        </table></td>
                                        <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding-right: 5px;"><span class="TravelLabel">Children:</span></td>
                                                <td style="padding-right: 5px;">
                                                <input class="TravelFont" style="width: 55px;" id="CHILDREN" name="CHILDREN" value="0" type="number"
                                                min="0" max="5" step="1" />
                                                </td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="right">
                                <input id="AirSearchButton" class="normal_button_class" type="submit" value="Search">
                                </td>
                            </tr>
                        </table>
                    </form>
                    <!-- AIR SEARCH -->
                </div>
                <div>
                    <!-- CAR SEARCH -->
                    <form action="/Travel/car.aspx" method="get" target="_blank">
                        <table class="CarSearchTable">
                            <tr>
                                <td colspan="2"><div class="TravelSearchError" id="MessageCar"></div></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Pick-up at:</span></td>
                                <td>
                                <input class="OriginInput" style="width: 275px;" id="CAR_PICKUP" name="CAR_PICKUP"/>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 23px"><span class="TravelLabel">Pick-up Date:</span></td>
                                <td style="height: 23px">
                                <table>
                                    <tr>
                                        <td>
                                        <input class="TravelFont" style="width: 125px" id="PICK_UP_DATE" name="PICK_UP_DATE" value="12/12/2011" />
                                        </td>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="PICK_UP_TIME" name="PICK_UP_TIME" value="10:00 AM" />
                                        </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Drop-off Date:</span></td>
                                <td>
                                <table>
                                    <tr>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="DROP_OFF_DATE" name="DROP_OFF_DATE" value="12/21/2011" />
                                        </td>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="DROP_OFF_TIME" name="DROP_OFF_TIME" value="10:00 AM" />
                                        </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Vehicle Class:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 200px;" id="CLASS" value="1" name="CLASS"/>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Car type:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 200px;" id="TYPE" value="1" name="TYPE"/>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Transmission:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 200px;" id="TRANSMISSION" value="1" name="TRANSMISSION"/>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Air Conditioning:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 200px;" id="AIR_CONDITIONING" value="1" name="AIR_CONDITIONING"/>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="right">
                                <input class="normal_button_class" type="submit" value="Search">
                                </td>
                            </tr>
                        </table>
                    </form>
                    <!-- CAR SEARCH -->
                </div>
                <div>
                    <!-- HOTEL SEARCH -->
                    <form action="/Travel/hotel.aspx" method="get" target="_blank">
                        <table class="HotelSearchTable">
                            <tr>
                                <td colspan="2"><div class="TravelSearchError" id="MessageHotel"></div></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">City:</span></td>
                                <td>
                                <input class="OriginInput" style="width: 275px;" id="HTL_LOCATION" name="HTL_LOCATION"/>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Country:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 245px;" id="COUNTRY_CODE" name="COUNTRY_CODE" value="1" />
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 23px"><span class="TravelLabel">Check-in date:</span></td>
                                <td style="height: 23px">
                                <table>
                                    <tr>
                                        <td>
                                        <input class="TravelFont" style="width: 125px" id="CHECK_IN_DATE" name="CHECK_IN_DATE" value="12/12/2011" />
                                        </td>
                                        <td>   </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Check-out date:</span></td>
                                <td>
                                <table>
                                    <tr>
                                        <td>
                                        <input style="width: 125px" class="TravelFont" id="CHECK_OUT_DATE" name="CHECK_OUT_DATE" value="12/21/2011" />
                                        </td>
                                        <td>   </td>
                                    </tr>
                                </table></td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Number of guests:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 100px;" id="OCCUPANCY" name="OCCUPANCY" value="1" />
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Area:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 135px;" id="AREA" name="AREA" value="1" />
                                </td>
                            </tr>
                            <tr>
                                <td><span class="TravelLabel">Hotel Name:</span></td>
                                <td>
                                <input class="TravelFont" style="width: 200px;" id="LIST_HOTEL_NAME" name="LIST_HOTEL_NAME"/>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="right">
                                <input class="normal_button_class" type="submit" value="Search">
                                </td>
                            </tr>
                        </table>
                    </form>
                    <!-- HOTEL SEARCH -->
                </div>
            </div>
        </body>
</html>

No answers yet. Maybe you can help?

Tags
General Discussions
Asked by
TazDeveloper
Top achievements
Rank 1
Share this question
or