Is there a simple way to have a user go to a URL from a dropdown list on SUBMIT, rather than onChange.

I have this code:

<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="">London</option>
<option value="">Glasgow</option>
</select>

Tried changing onChange to onSubmit, but it doesn't work.

Is there a simple way to have a user go to a URL from a dropdown list on SUBMIT, rather than onChange.

I have this code:

<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.">London</option>
<option value="http://www.domain-two.">Glasgow</option>
</select>

Tried changing onChange to onSubmit, but it doesn't work.

• javascript
• jquery
• html
• forms
• form-submit

Share Improve this question Follow asked Dec 6, 2016 at 0:41 SamSam 3711 silver badge99 bronze badges 1

• a select doesn not have a submit even. Submit event is with the form. – Manish Commented Dec 6, 2016 at 3:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try this instead.

Also: You'll want to keep your JavaScript separated from your HTML. Do not use onchange or similar HTML attributes. While it's technically not wrong, it's bad from a code quality/maintainability perspective.

var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");

goBtn.onclick = function() {
  window.location = menu.value;
}

<select id="menu">
  <option selected="selected">Select One</option>
  <option value="http://www.domain-one.">London</option>
  <option value="http://www.domain-two.">Glasgow</option>
</select>
<input type="button" id="goBtn" value="GO!">

Does this work for you?

You can use the onsubmit event on the <form> element, but you'll want to preventDefault on the event, and for the onsubmit event you need to use a return:

<form name="cityselect" onsubmit="return redirectTo(this)">
  <select name="menu" value="GO">
    <option selected="selected">Select One</option>
    <option value="http://www.domain-one.">London</option>
    <option value="http://www.domain-two.">Glasgow</option>
  </select>
</form>

<script>
  function redirectTo(elem) {
    event.preventDefault();
    top.location.href = elem.firstElementChild.options[elem.firstElementChild.selectedIndex].value
  }
</script>