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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With