Redirect form to different URL based on select option element

javascript select onclick

113,667

Solution 1

Just use a onchnage Event for select box.

<select id="selectbox" name="" onchange="javascript:location.href = this.value;">
    <option value="https://www.yahoo.com/" selected>Option1</option>
    <option value="https://www.google.co.in/">Option2</option>
    <option value="https://www.gmail.com/">Option3</option>

</select>

And if selected option to be loaded at the page load then add some javascript code

<script type="text/javascript">
    window.onload = function(){
        location.href=document.getElementById("selectbox").value;
    }       
</script>

for jQuery: Remove the onchange event from <select> tag

jQuery(function () {
    // remove the below comment in case you need chnage on document ready
    // location.href=jQuery("#selectbox").val(); 
    jQuery("#selectbox").change(function () {
        location.href = jQuery(this).val();
    })
})

Solution 2

you can use this simple way

<select onchange="location = this.value;">
                <option value="/finished">Finished</option>
                <option value="/break">Break</option>
                <option value="/issue">Issues</option>
                <option value="/downtime">Downtime</option>
</select>

will redirect to route url you can direct to .html page or direct to some link just change value in option.

113,667

Author by

user1400854

Updated on July 02, 2020

Comments

user1400854 almost 4 years
new to JavaScript seeking some help. I have a form with a select drop down with 5 options. Option1 Option2 option3 Option4 Option5'

I need to have the form to redirect to another url if any of the options are selected apart from Option 1 which should be the default one on page load.

Thank you in advance

I only used the following
```
<form action="" id="main" name="main" method="get" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">

<select id="Region" name="Region" tabindex="7">
   <option value="/url">Option1</option>
   <option value="/url">Option2</option>
   <option value="/url">Option3</option>
   <option value="/url>Option4</option>
   <option value="" selected="selected">Option5</option>'
</select>
```
user1400854 almost 12 years

if I wanted to achieve the same result using only jQuery?
Gediminas over 5 years

Why one is onLoad and another with jQuery is onChange? The first one works not as aspected - I can not choose the value, I'm redirected before this ;)
jafar pinjar over 5 years

@KrishnaKumar, I want the dropdown is selected after redirecting to url, is that can be done?