Go to different url on clicking button

Question

i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.

<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>

if user selects Google from drop down list and clicks button, then page should be redirected to www.google.com and if it selects yahoo and clicks button should go to www.yahoo.com

I would like to mention that I need The button in this scenario. I don't want to go respective site on drop down selection.Only after clicking the button.

Thank you in advance.

no..i need it for my blog on blogspot..i m not sure it supports asp.net commnads ...so need it simple.. — Sangram Nandkhile, Jun 17 '11 at 15:19

score 7 · Accepted Answer · answered Jun 17 '11 at 14:56

HTML:

<select name="myList" id="ddlMyList">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.ask.com">Ask</option>
</select>

<input type="button" value="Go To Site!" onclick="NavigateToSite()" />

JavaScript:

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.location = selectedVal;
}

You could also open the site in a new window by doing this:

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.open(selectedVal)
}

As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.

Thanx a lot..it worked perfectly...Thanx for the New Window code..that really helped me !! — Sangram Nandkhile, Jun 22 '11 at 12:41

score 5 · Answer 2 · answered Jun 17 '11 at 14:50

First, change the option values to the URL you want to target:

<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>

Next, add an ID to the select so you can target it:

<select name="myList" id="myList">

Finally, add an onclick method to the select control to handle the redirect:

<input type="button" onclick="document.location.href=document.getElementById('myList').value">

Add a button to this answer and it's as perfect as mine ;) – Jivings Jun 17 '11 at 14:52 — Jivings, Jun 17 '11 at 14:52

score 2 · Answer 3 · answered Jun 17 '11 at 14:51

<select name="myList">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.ask.com">Ask</option>
</select>

<input type="button" onclick="window.location=document.myList.value" />

score 1 · Answer 4 · answered Jun 17 '11 at 14:50

Using JavaScript, you can attach an onclick event to the button. In the event handler, you can use an if statement to check which value was selected in the select list, and use window.location to redirect the user to the appropriate URL.

I would suggest changing the value of the option elements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.

score -4 · Answer 5 · edited Apr 20 '14 at 14:42

-4

onclick()="window.location.href='page.html'"

edited Apr 20 '14 at 14:42

Jason Aller

3,541
28
38
38

answered Apr 20 '14 at 14:23

Pratish

1

Go to different url on clicking button

5 Answers5