Really simple static html page - Page 1
Forum section: electronics / general

author: firewalker
author_rank: Super Contributor
timestamp: October 18, 2022, 02:15:48 pm
content: In an html list as the example bellow. Can I add a button to open the selected page? I know about the onchange event. I want to do it after pressing a button.Code:<!DOCTYPE html><html><body><h1>Select</h1><br><form><select name="Choose"><option value="https://.....">One</option><option value="https://.....">Two</option></select></form></body></html>

author: DavidAlfa
author_rank: Super Contributor
timestamp: October 18, 2022, 02:34:11 pm
content: I barely know html yet it took me two searches in Google:https://bfy.tw/Tf2vCode:<html><body><h1>Select</h1><p>Open in the same window</p><a href="http://www.google.com" target="_parent"><button>Google</button></a><a href="http://www.yahoo.com" target="_parent"><button>Yahoo!</button></a><br><br><p>Open in a new window</p><a href="http://www.google.com" target="_blank"><button>Google</button></a><a href="http://www.yahoo.com" target="_blank"><button>Yahoo!</button></a></body></html>

author: firewalker
author_rank: Super Contributor
timestamp: October 18, 2022, 02:47:01 pm
content: I didn;t palce the question correctly. I have a drop down list that you can select an item. The value of the item is a url link. I want to also place a button that will open the selected url.

author: mariush
author_rank: Super Contributor
timestamp: October 18, 2022, 02:57:55 pm
content: You would do it with JavascriptPlace an onclick event on the button, which calls a Javascript function which reads the value configured in the select, and based on that select value it opens the desired URL.// event.preventDefault() kills the submit form event triggered by pressing the only button in the form (default in some if not all browsers)// jump is the functionI guess you could use onchange to auto jump without having to press button.Code:<!DOCTYPE html><html><body><h1>Select</h1><br><form><select name="choose"><option value="1" selected>One</option><option value="2" >Two</option></select><button name="openlink" onclick="event.preventDefault(); jump();" >Go</button></form><script type="text/javascript">function jump() {// arrays start from 0, and used values 1 and 2 in the selectvar urls = [ '','https://www.google.com' , 'https://www.linustechtips.com']var element = document.querySelector('select[name="choose"]')var id = parseInt(element.value) // get the value of the select elementconsole.log(urls) // press F12 to open developer tools and you see it logged therewindow.open(urls,'_self') // use _blank to open in new tab}</script></body></html>

author: ledtester
author_rank: Super Contributor
timestamp: October 18, 2022, 03:02:36 pm
content: Here's a bare bones solution:Code:<html><select id="the-select"><option value="https://eevblog.com">eevblog.com<option value="https://example.com">example.com</select><button onclick="window.location=document.getElementById('the-select').value">Go to Site</button></html>You can try it out at:https://codepen.io/codeBelt/pen/OVjxJN

author: firewalker
author_rank: Super Contributor
timestamp: October 18, 2022, 03:07:27 pm
content: Quote from: ledtester on October 18, 2022, 03:02:36 pmAnd to open it in a new tab? I must put somewhere target="_blank"?

author: pcprogrammer
author_rank: Super Contributor
timestamp: October 18, 2022, 03:20:37 pm
content: Quote from: firewalker on October 18, 2022, 03:07:27 pmCode:<html><select id="the-select"><option value="https://eevblog.com">eevblog.com<option value="https://example.com">example.com</select><button onclick="window.open(document.getElementById('the-select').value)">Go to Site</button></html>For that there is window.open

author: ledtester
author_rank: Super Contributor
timestamp: October 18, 2022, 03:23:34 pm
content: Quote from: firewalker on October 18, 2022, 03:07:27 pmSorry, missed that requirement.Use the same technique that mariush used, i.e. with window.open(..., '_blank'):Code:<button onclick="window.open(document.getElementById('the-select').value,'_blank')">Click me</button>Here are the options for the second parameter of window.open():Code:_self – It opens the URL in the current tab by replacing the opened page._blank – It opens the URL in a new tab. This is the default value._parent – It loads the URL into the parent frame. If there is no parent, behave as _self._top – It opens the URL by replacing any framesets. If no frameset, behave as _top.Update: I guess '_blank" is the default so a second parameter isn't necessary.

author: firewalker
author_rank: Super Contributor
timestamp: October 18, 2022, 03:25:04 pm
content: Thanks you very much!!!Alexander.