Search jQuery

jQuery Forum

Using jQuery

efoula

On selection change replace part of a href

in Using jQuery • 8 years ago

Hello there,

I am wondering if anyone can help me with this problem.

Shortly: I have a drop down selection with multiple options, all I want to do is on change of this selection (when user choose another option), it get the value of the new selected option and submit it in href tag instead of another part in this href (replace with part of href).

Problem: everything works fine for the first selection change, but if the user decided to select another option (second, or third time), it doesn't get the new selected option value, it keep the value of the first selected option,

it is like I need a realtime change.

Example:

HTML

<a class="link" href="http://www.google.com/hotel/replacement-part/">Check Availability</a>
<label>Property</label>
<select id="combobox">
<option value="noselection">Select your Preferred Hotel</option>
<option value="A">ABC</option>
<option value="B">BCD</option>
<option value="D">DOS</option>
<option value="C">CAM</option>
</select>

jQuery

$("#combobox").change(function(){
var hotel = $(this[this.selectedIndex]).val();
$('a').each(function(){
this.href = this.href.replace ('replacement-part', hotel);
});

if you change the selection to option value: B, it will replace part of href, but if you then change the selection to another option (e.g. D), it will not replace the replacement part of href to the new value which is D, it just will keep it with the first selection option value which was B.

Thank you.

Best,

EF.

Replies(8)

dsvick

Re: On selection change replace part of a href

8 years ago

Think of it this way, the first time you load the page, the href is:

http://www.google.com/hotel/replacement-part/

Then you make a selection (say you select the first option), and the href is updated to

http://www.google.com/hotel/A/

The next time you make a selection, it gets to the line where is does the replacement, can't find the string "replacement-part" so doesn't do anything.

Try this

$("#combobox").change(function(){
var theLink = "http://www.google.com/hotel/replacement-part/".replace('replacement-part', $(this).val());
$('a').attr("href", theLink);
});

Also, I assume you only have one link on your page? You are going to replace every href with that value doing it the way you have it. You may want to add an id to the element so you can target it specifically in case you ever change the page.

Dave

efoula

Re: Re: On selection change replace part of a href

8 years ago

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.

dsvick

Re: On selection change replace part of a href

8 years ago

The problem your having is that all of the variables you're using in the datepicker onSelect handler are local to that block, they wont be visible to any other code. You could use global variables but that is frowned on, you're best bet would be to create the href when the link is clicked. That way you aren't doing any unnecessary calculations. I would do this:

$( "#date-picker-input-1" ).datepicker({
dateFormat: 'd-m-yy',
inline: true
}).datepicker('widget').wrap('<div class="ll-skin-latoja"/>');
$( "#date-picker-input-2" ).datepicker({
dateFormat: 'd-m-yy',
inline: true
}).datepicker('widget').wrap('<div class="ll-skin-latoja"/>');
$("a.booklink").click(function(e) {
e.preventDefault();
var fromDate = new Date($("#date-picker-input-1").val());
var month = fromDate.getMonth() + 1;
var day = fromDate.getDate();
var year = fromDate.getYear();
var toDate = new Date($("#date-picker-input-2").val());
var monthout = toDate.getMonth() + 1;
var dayout = toDate.getDate();
var yearout = toDate.getYear();
var hotel = $("#combobox").val();
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";
window.location(theLink);
});

And get rid of the change handler, since you wont need it.

Dave

efoula

Re: Re: On selection change replace part of a href

8 years ago

Thank you for your prompt reply, but I think you are missing something on the final script, I just got this error (Uncaught TypeError: object is not a function) ??

!!??

dsvick