CODEWITHSUNDEEP
htmlbuttonclick
Sangram Nandkhile
Sangram Nandkhile

Reputation: 18202

Go to different url on clicking button

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.

Upvotes: 6

Views: 41023

Answers (5)

Pratish
Pratish

Reputation: 1

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

Upvotes: -4

James Hill
James Hill

Reputation: 61862

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.

Upvotes: 7

Jivings
Jivings

Reputation: 23262

<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" />

Upvotes: 2

James Allardice
James Allardice

Reputation: 166071

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.

Upvotes: 1

George Cummins
George Cummins

Reputation: 28936

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">

Upvotes: 5

Related Questions