Redirect form to different URL based on select option element

Question

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>

Krishna Kumar · Accepted Answer · 2012-09-12T16:01:09.753

63

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();
    })
})

edited Sep 12 '12 at 16:01

answered Sep 12 '12 at 14:20

Krishna Kumar

2,101
1
23
34

if I wanted to achieve the same result using only jQuery? – user1400854 Sep 12 '12 at 15:54
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 ;) – Gediminas Šukys Oct 30 '18 at 18:35
@KrishnaKumar, I want the dropdown is selected after redirecting to url, is that can be done? – Jafar Pinjar Jan 04 '19 at 10:46

score 16 · Answer 2 · answered Apr 07 '17 at 05:52

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.

score 0 · Answer 3 · answered Jul 01 '18 at 13:04

This can be archived by adding code on the onchange event of the select control.

For Example:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>

Redirect form to different URL based on select option element

3 Answers3

Linked