Really I appreciate your reply, your code is very logical and worked like a charm, thank you.
But actually it doesn't resolve my whole problem, because I was just thought that this part of code is the problem and this happened because of my little experience with jQuery, so I have another question if you don't mind....
The result I want to get:
I am using jquery ui.datepicker to allow users to pick the checkin and checkout dates of their hotel's visit/stay, and to check the availability of the selected days you have chosen, you should redirect the user to a link which should contain the hotel's name, checkin date and checkout date in the url. So, I tried to change each part of the href to reach this result..
e.g. (www.example.com/hotel=A&checkin-day=1&checkin-month=4&checkin-year=2014&checkout-day=5&checkout-month=4&checkout-year=2014)
and here's my HTML and jQuery code:
- <label>Check In</label>
- <input type="text" id="date-picker-input-1" placeholder="DD-MM-YYYY" class="input_bg2" />
- <label>Check Out</label>
- <input type="text" id="date-picker-input-2" placeholder="DD-MM-YYYY" class="input_bg2" />
-
- <div class="ui-widget">
- <label>Property</label>
- <select id="combobox" style="width: 218px !important;" class="input_bg">
- <option value="noselection">Select your Preferred Hotel</option>
- <option value="A">Asd</option>
- <option value="B">Bsd</option>
- <option value="C">Csd</option>
- <option value="D">Dsd</option>
- <option value="E">Esd</option>
- </select>
- </div>
- <a class="booklink" href="http://www.example.com/hotel=A&checkin-day=1&checkin-month=4&checkin-year=2014&checkout-day=5&checkout-month=4&checkout-year=2014">Check Availability</a>
- $( "#date-picker-input-1" ).datepicker({
- dateFormat: 'd-m-yy',
- inline: true,
- onSelect: function (dateStr,dpObject) {
-
- var month = dpObject.selectedMonth +1;
- var day = dpObject.selectedDay;
- var year = dpObject.selectedYear;
-
- }
- }).datepicker('widget').wrap('<div class="ll-skin-latoja"/>');
-
- $( "#date-picker-input-2" ).datepicker({
- dateFormat: 'd-m-yy',
- inline: true,
- onSelect: function (dateStr,dpwObject) {
-
- var monthout = dpwObject.selectedMonth +1;
- var dayout = dpwObject.selectedDay;
- var yearout = dpwObject.selectedYear;
-
- }
- }).datepicker('widget').wrap('<div class="ll-skin-latoja"/>');
-
- $("#combobox").change(function(){
-
- var hotel = $(this[this.selectedIndex]).val();
-
- });
but if I tried to add this script at the end of the above script to get the final href changes:
- var theLink = "http://www.example.com/hotel=" + hotel + "&checkin-day=" + dayin + "&checkin-month=" + monthin + "&checkin-year=" + yearin + "&checkout-day=" + dayout + "&checkout-month=" + monthout + "&checkout-year=" + yearout";
- $('a').attr("href", theLink);
I just get a result text of undefined for all the above variables' values.
Your advice will be appreciated, and thank you in advance.
Best,
EF.