Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 780
Sangram Nandkhile Avatar asked Jun 17 '11 14:06

Sangram Nandkhile


People also ask

How do I click a button and redirect to another page?

By using HTML Anchor Tags <a>.. </a>, you can Redirect on a Single Button Click [html button click redirect]. To use HTML Anchor tags to redirect your User to Another page, you need to write your HTML Button between these HTML Anchor Tag's starting <a> and Closing </a> Tags.

How do you link a button to a URL?

Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location. Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.


1 Answers

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.

like image 83
James Hill Avatar answered Sep 20 '22 14:09

James Hill