Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redirect form to different URL based on select option element

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>
like image 283
user1400854 Avatar asked Sep 12 '12 13:09

user1400854


2 Answers

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();
    })
})
like image 101
Krishna Kumar Avatar answered Nov 02 '22 16:11

Krishna Kumar


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.

like image 42
kumbhani bhavesh Avatar answered Nov 02 '22 17:11

kumbhani bhavesh