CODEWITHSUNDEEP
javascripturl
Rocco The Taco
Rocco The Taco

Reputation: 3797

onChange does not redirect to URL

I have the following form select:

<select name="category" onChange="top.location.href=this.options[this.selectedIndex].value;" onSubmit="top.location.href=this.options[this.selectedIndex].value;"  value="GO">

<input value="Go" type="submit">

That operates with the 

<option value="http://yourdomain.com/?query=&category=jacksonville">Jacksonville</option>

The onChange element works fine and redirects to the correct URL but when I click submit the redirect does not work and simply appends to the end of the URL. I've tried to combine the two events and that breaks both actions.

When submit is clicked it does this:

http://www.yourdomain.com/classifieds/?category=http%3A%2F%2Fdomain.com%2F%3Fquery%3D%26category%3Dpanama-city

Upvotes: 1

Views: 230

Answers (1)

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

The onSubmit property should be given in the form and the onChange on an input element see the example below that will work for you:

<select name="category" onChange="top.location.href=this.options[this.selectedIndex].value;">
<option value="http://yourdomain.com/?query=&category=jacksonville">Jacksonville</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>

The above code will redirect upon the onchange event so you actually do not need on submit as upon changing the page will already redirect.

See below for the onSubmit example:

<form onSubmit="event.preventDefault();top.location.href=document.getElementById('domains').options[document.getElementById('domains').selectedIndex].value;">
<select name="category" id="domains">
<option value="http://yourdomain.com/?query=&category=jacksonville">Jacksonville</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<input value="Go" type="submit">
</form>

Here we redirect on the form submit function.

UPDATE

The reason why we use event.preventDefault(); is to prevent the default form submission and to perform the operation we provided. i.e to redirect. to the selected URL.

Upvotes: 2

Related Questions