Onchange dropdown using relative paths

So I am currently under the impression, that if you have an html select dropdown that uses onchange to set window.top.location.href, that you need to use an absolute path (i.e. a path with http://www.whatever.com).

To make this short and sweet, given the code below, how would I go about doing a select dropdown that uses relative path names (i.e. ‘/folder/file.php’) rather than absolute?

The code below does what I need, I just need relative paths. However, alternate methods are welcome.:wink:

<form action="" method="post" id="form_quick_state" name="form_quick_state">
	<label for="pick_state">
		<select name="pick_state" id="pick_state" class="block centered margin_10_top" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
			<option value="-">select state</option>
			<?php 
				foreach($ar_state as $state_key => $state_value){
					$state_value = ucwords(strtolower($state_value));
					echo '<option value="http://www.'.$_SERVER['SERVER_NAME'].'/state/_'.$state_key.'/">'.$state_value.'</option>';
				}
			?>
		</select>
	</label>
</form>

yeah, you’re absolutely right. I must have just entered it in wrong before.

I tested just a relative value with:
window.top.location.href=this.options[this.selectedIndex].value;

and it works fine.

I’m assuming I can take out the ‘top’ (and retain cross-broswer compatibility) as well since I’m not using frames?

This was some legacy code that I had copied and pasted out of the previous guy’s code.

Thanks for the input!

I ended up using the code I inserted here. Since window.location.href is the complete path of the URL in the window (http://www.something.com), if you use javascript to change it to a relative value, your browser window url would try to go to just ‘/folder/file.ext’, and that’s not a valid url.

What I did was use set my select option value to:

value="/listings.php?bwstate='.$state_key.'"

which when the page loads would look something like this:

value="/listings.php?bwstate=CA"

and when the user changes the select dropdown, I use this in the onchange event:

window.top.location.href='http://'+document.domain+this.options[this.selectedIndex].value

Notice how my value is relative, but in the onchange I append the select option value to the url using document.domain.

This achieves what I was looking for. So no matter what url your using, the dropdown will always append that relative path.


<select name="pick_state" id="pick_state" class="block centered margin_10_top" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href='http://'+document.domain+this.options[this.selectedIndex].value}">
	<option value="-">select state</option>
					<?php 
						foreach($ar_state as $state_key => $state_value){
							$state_value = ucwords(strtolower($state_value));
							echo '<option value="/listings.php?bwstate='.$state_key.'">'.$state_value.'</option>';
						}
					?>
</select>

That’s not true. Just place a relative path and it should definitely work. If it doesn’t work, please show the code that uses relative paths.

But what i’m trying to tell you is that there is no need for all of this !
window.top.location.href can definitely take a relative path.
I think you must have made a mistake while writing the relative path because it works perfectly.

yes you can take out the ‘top’.
You’re welcome :slight_smile: