CODEWITHSUNDEEP
javascriptphpjqueryhtml
Guilherme Santos
Guilherme Santos

Reputation: 43

Go to URL with dropdown values I select (url.com/dropdownvalue1+dropdownvalue2+etc)

How can I do the following? (using a simple html form and javascript or jquery whatever I need)

1) To have dropdown values appended to URL like this: http://www.url.com/catalogsearch/result/?q=dropdownvalue1+dropdownvalue2

(+ symbol is going to stay there like "dropdownvalue1" + "+" + "dropdownvalue2")

2) To have URLs built with IFs like this: http://www.url.com/catalogsearch/result/?q=customvar

Where customvar is like IF dropdownvalue1 = abc AND dropdownvalue2 = def THEN URL = customurl

Both 1 and 2 will send me to that URL when I click submit after selecting dropdown values. How can I do this?

I know how to create the selection and go to URL, but I want to have to click Submit to go to URL and not just go right away and also have those values appended.

<select id="dropdown">
<option value="">Select</option>
<option value="google">Google</option>
<option value="bing">Bing</option>
</select>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dropdown").change(function(){
if ( $("#dropdown option:selected").val() == 'google'){
window.location = 'http://google.com';
}
if ( $("#dropdown option:selected").val() == 'bing'){
window.location = 'http://bing.com';
}
});
});
</script>

Thanks in advance.

Upvotes: 2

Views: 2170

Answers (2)

Cosco Tech
Cosco Tech

Reputation: 575

Redirect to a url based on value of a select box

Add this button to your HTML 

<input type="submit" value="Submit" onclick="url()"/>

The button includes an onclick event that runs this javascript function 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
   function url() {
        var value1 = $("#dropdown").val();
        if ( value1 == 'google'){
            window.location.href = 'http://google.com';
        }
        if ( value1 == 'bing'){
            window.location.href = 'http://bing.com';
        }
    }
</script>

Alter to suit your needs
This is the line that gets the value from the select box var value1 = $("#dropdown").val();
If you want to create more select boxes, just add another variable to retrieve the data.
e.g. var value2 = $("#dropdown2").val();
You can also edit the if statements and use the variables in the window.location redirects. 

if (value1 == 'google' && value2 == "something"){
    window.location.href = 'http:/google.com?value1='+value1+'&value2='+value2;
}

A Simpler Method

Use the select box values to alter a single URL. 

function url() {
    var value1 = $("#dropdown").val();
    window.location.href = 'http://'+value1+'.com';
}

Upvotes: 2

Jack Albright
Jack Albright

Reputation: 509

shouldn't it be window.location.href?

Upvotes: 1

Related Questions