Open the correct URL based on radio button and button selection |
Open the correct URL based on radio button and button selection |
Scrabble |
Jan 18 2023, 05:14 PM
Post
#1
|
Group: Members Posts: 4 Joined: 18-January 23 Member No.: 28,755 |
I have spent days on this and can not figure out how to get the correct stock symbol to open the correct radio button chosen. I am very limited on my knowledge of javascript.
This is what I have started. It is not working properly. If 'StockTwits' (the first radio button) is selected, then any button I press always opens Arista Networks (the first button). If 'Yahoo' (the second radio button) is selected, then any button I press always opens Applied DNA Sciences (the second button). If 'SEC Filings' (the third radio button) is selected, then any button I press always opens Avaya (the third button). And so on. Then I 'corrected' the line in my code from: if(SiteChoiceNames[y].checked) to: if(TickerLookupNames[y].checked) Now it does nothing. I haven't even gotten to the ones with more URL after the ticker symbol, much less the OPTIONS one having the ticker in the URL twice, for example where: If the DIVIDENDS radio button is selected then it will open: https://www.nasdaq.com/market-activity/stoc...ividend-history If the OPTIONS radio button is selected then it will open: https://finance.yahoo.com/quote/APDN/options?p=APDN <html> <head> </head> <body> <center> <input type="checkbox" id="neworsame" onClick="setLinkTarget(this, '#my-link')" checked><label for="neworsame">Open in new</label> tab <input type="radio" name="SiteChoice" id="1StockTwits" value="https://stocktwits.com/symbol/" checked><label for="1StockTwits">StockTwits</label> <input type="radio" name="SiteChoice" id="2Yahoo" value="https://finance.yahoo.com/quote/"><label for="2Yahoo">Yahoo</label> <input type="radio" name="SiteChoice" id="3SECFilings" value="https://fintel.io/sfs/us/"><label for="3SECFilings">SEC Filings</label> <input type="radio" name="SiteChoice" id="4Offerings" value=""><label for="4Offerings">Offerings</label> <input type="radio" name="SiteChoice" id="5Dividends" value=""><label for="5Dividends">Dividends</label> <input type="radio" name="SiteChoice" id="6Splits" value="https://www.stocksplithistory.com/?symbol="><label for="6Splits">Splits</label> <input type="radio" name="SiteChoice" id="7Options" value=""><label for="7Options">Options</label> <input type="radio" name="SiteChoice" id="8ShortInterest" value="https://shortsqueeze.com//shortinterest/stock/term2.php?s="><label for="8ShortInterest">Short Interest</label> <input type="radio" name="SiteChoice" id="9Float" value=""><label for="9Float">Float</label> <input type="radio" name="SiteChoice" id="10Ownership" value=""><label for="10Ownership">Ownership</label> <input type="radio" name="SiteChoice" id="11Historical" value=""><label for="11Historical">Historical</label> <input type="radio" name="SiteChoice" id="12Earnings" value=""><label for="12Earnings">Earnings</label> <input type="radio" name="SiteChoice" id="13Titan" value="https://www.stocktitan.net/news/"><label for="13Titan">Stock Titan</label> </center> <br> <button onclick="opentabs()" name="TickerLookup" value="ANET">Arista Networks</button> <button onclick="opentabs()" name="TickerLookup" value="APDN">Applied DNA Sciences</button> <button onclick="opentabs()" name="TickerLookup" value="AVYA">Avaya</button> <button onclick="opentabs()" name="TickerLookup" value="BJ">BJ's Wholesale Club</button> <button onclick="opentabs()" name="TickerLookup" value="KO">Coca-Cola</button> <button onclick="opentabs()" name="TickerLookup" value="LMT">Lockheed Martin</button> <button onclick="opentabs()" name="TickerLookup" value="MNKD">Mannkind Corporation</button> <button onclick="opentabs()" name="TickerLookup" value="NEE">NextEra Energy</button> <button onclick="opentabs()" name="TickerLookup" value="TGTX">TG Therapeutics</button> <button onclick="opentabs()" name="TickerLookup" value="XRX">Xerox</button> <script> function opentabs() { var SiteChoiceNames = document.getElementsByName('SiteChoice'); var TickerLookupNames = document.getElementsByName('TickerLookup'); for(var x = 0; x < SiteChoiceNames.length; x++) { if(SiteChoiceNames[x].checked) { for(var y = 0; y < TickerLookupNames.length; y++) { if(TickerLookupNames[y].checked) { window.open(SiteChoiceNames[x].value + TickerLookupNames[y].value); } } } } } </script> </body> </html> This post has been edited by Scrabble: Jan 18 2023, 05:55 PM |
pandy |
Jan 18 2023, 07:48 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
For me nothing at all happens when I click the buttons.
|
Scrabble |
Jan 18 2023, 08:11 PM
Post
#3
|
Group: Members Posts: 4 Joined: 18-January 23 Member No.: 28,755 |
For me nothing at all happens when I click the buttons. Thank you for responding, Pandy. That is what I said..."Now it does nothing." after I changed the one line of code mentioned above. I probably am going about it the wrong way by trying to do a 'for' for both the radio button choices and button choices. I have another modification to my code and that opens the URL but gives an 'undefined'. <html> <head> </head> <body> <center> <input type="checkbox" id="neworsame" onClick="setLinkTarget(this, '#my-link')" checked><label for="neworsame">Open in new</label> tab <input type="radio" name="SiteChoice" id="https://stocktwits.com/symbol/" value="https://stocktwits.com/symbol/" checked><label for="1StockTwits">StockTwits</label> <input type="radio" name="SiteChoice" id="https://finance.yahoo.com/quote/" value="https://finance.yahoo.com/quote/"><label for="2Yahoo">Yahoo</label> <input type="radio" name="SiteChoice" id="3SECFilings" value="https://fintel.io/sfs/us/"><label for="3SECFilings">SEC Filings</label> <input type="radio" name="SiteChoice" id="4Offerings" value=""><label for="4Offerings">Offerings</label> <input type="radio" name="SiteChoice" id="5Dividends" value=""><label for="5Dividends">Dividends</label> <input type="radio" name="SiteChoice" id="6Splits" value="https://www.stocksplithistory.com/?symbol="><label for="6Splits">Splits</label> <input type="radio" name="SiteChoice" id="7Options" value=""><label for="7Options">Options</label> <input type="radio" name="SiteChoice" id="8ShortInterest" value="https://shortsqueeze.com//shortinterest/stock/term2.php?s="><label for="8ShortInterest">Short Interest</label> <input type="radio" name="SiteChoice" id="9Float" value=""><label for="9Float">Float</label> <input type="radio" name="SiteChoice" id="10Ownership" value=""><label for="10Ownership">Ownership</label> <input type="radio" name="SiteChoice" id="11Historical" value=""><label for="11Historical">Historical</label> <input type="radio" name="SiteChoice" id="12Earnings" value=""><label for="12Earnings">Earnings</label> <input type="radio" name="SiteChoice" id="13Titan" value="https://www.stocktitan.net/news/"><label for="13Titan">Stock Titan</label> </center> <br> <button onclick="opentabs()" id="ANET" name="TickerLookup" value="ANET">Arista Networks</button> <button onclick="opentabs()" id="APDN" name="TickerLookup" value="APDN">Applied DNA Sciences</button> <button onclick="opentabs()" id="AVYA" name="TickerLookup" value="AVYA">Avaya</button> <button onclick="opentabs()" id="BJ" name="TickerLookup" value="BJ">BJ's Wholesale Club</button> <button onclick="opentabs()" id="KO" name="TickerLookup" value="KO">Coca-Cola</button> <button onclick="opentabs()" id="LMT" name="TickerLookup" value="LMT">Lockheed Martin</button> <button onclick="opentabs()" id="MNKD" name="TickerLookup" value="MNKD">Mannkind Corporation</button> <button onclick="opentabs()" id="NEE" name="TickerLookup" value="NEE">NextEra Energy</button> <button onclick="opentabs()" id="TGTX" name="TickerLookup" value="TGTX">TG Therapeutics</button> <button onclick="opentabs()" id="XRX" name="TickerLookup" value="XRX">Xerox</button> <script> function opentabs() { var SiteChoiceNames = document.getElementsByName('SiteChoice'); var TickerLookupNames = document.getElementsByName('TickerLookup'); for(var x = 0; x < SiteChoiceNames.length; x++) { if(SiteChoiceNames[x].checked) { window.open(SiteChoiceNames[x].value + TickerLookupNames.value); } } } </script> </body> </html> |
coothead |
Jan 18 2023, 08:16 PM
Post
#4
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Scrabble,
coothead |
Scrabble |
Jan 18 2023, 08:59 PM
Post
#5
|
Group: Members Posts: 4 Joined: 18-January 23 Member No.: 28,755 |
Hi there Scrabble,
coothead Coothead, that works, thanks! Could you possibly help with these two scenarios as well? One has the ticker symbol twice in the URL addess and the other has more URL after the ticker symbol... If the OPTIONS radio button is selected then it will open: https://finance.yahoo.com/quote/APDN/options?p=APDN If the HISTORICAL radio button is selected then it will open: https://finance.yahoo.com/quote/APDN/history/ |
Jason Knight |
Jan 19 2023, 12:40 PM
Post
#6
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
I'd say some of your problem isn't just on the JS side, but the HTML too. A task like this isn't so complex you couldn't make a scripting off handler using redirects in addition to the scripting one.
You're not only overthinking it in that regard, you've got telltales out 25 year out of date practices and invalid code like the CENTER tag. Even just your lack of a doctype is asking some browsers -- like Firefox -- to possibly not handle HTML or even JavaScript correctly. Even your use of "id" is invalid since id's cannot contain slashes, colons, or any of the other special characters found in a URI. I mean first fix up the markup: CODE <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="redirect.screen.css" media="screen"> <title>Redirecting Form Demo</title> </head><body> <form action="redirect.php" method="post" class="redirect"> <fieldset class="options" hidden> <label> <input type="checkbox" name="newTab" checked> Open in new tab<br> </label> <!-- .options --></fieldset> <fieldset class="radio"> <label> <input type="radio" name="site" value="https://stocktwits.com/symbol/" checked > StockTwits </label><label> <input type="radio" name="site" value="https://finance.yahoo.com/quote/" > Yahoo </label><label> <input type="radio" name="site" value="https://fintel.io/sfs/us/" > SEC Filings </label><label> <input type="radio" name="site" value="" > Offerings </label><label> <input type="radio" name="site" value="" > Dividends </label><label> <input type="radio" name="site" value="https://www.stocksplithistory.com/?symbol=" > Splits </label><label> <input type="radio" name="site" value="" > Options </label><label> <input type="radio" name="site" value="https://shortsqueeze.com//shortinterest/stock/term2.php?s=" > Short Interest </label><label> <input type="radio" name="site" value="" > Float </label><label> <input type="radio" name="site" value="" > Ownership </label><label> <input type="radio" name="site" value="" > Historical </label><label> <input type="radio" name="site" value="" > Earnings </label><label> <input type="radio" name="site" value="https://www.stocktitan.net/news/" > Stock Titan </label> <!-- .radio --></fieldset> <footer> <button name="lookup" value="ANET">Arista Networks</button> <button name="lookup" value="APDN">Applied DNA Sciences</button> <button name="lookup" value="AVYA">Avaya</button> <button name="lookup" value="BJ">BJ's Wholesale Club</button> <button name="lookup" value="KO">Coca-Cola</button> <button name="lookup" value="LMT">Lockheed Martin</button> <button name="lookup" value="MNKD">Mannkind Corporation</button> <button name="lookup" value="NEE">NextEra Energy</button> <button name="lookup" value="TGTX">TG Therapeutics</button> <button name="lookup" value="XRX">Xerox</button> </footer> <!-- .redirect --></form> <script src="redirect.js"></script> </body></html> The form makes scripting easy to pull "formdata" to get the active radio value and the checkbox state. The hidden on the "new window" part is so that non-scripted users don't get the shaft. Of course scripting off/blocked you'd need a redirect.php file to handle the form. Wrapping the INPUT with their LABEL reduces the amount of code and provides the exact same functionality of for/id. All those pointless ID and FOR attributes can be pitched in the garbage this way. for the scripting: CODE { for (const button of document.querySelectorAll( ".redirect .options" )) button.hidden = false; const buttonEvent = (e) => { e.preventDefault(); const data = new FormData(e.currentTarget.closest("form")), site = data.get("site"); if (site) { const target = site + e.currentTarget.value; if (data.get("newTab")) window.open(target); else window.location.href = target; } else alert("Lookup Site Not Implemneted Yet."); }; // buttonEvent for (const button of document.querySelectorAll( ".redirect footer button" )) button.addEventListener("click", buttonEvent); } First is a scope isolating {} so that our let/const aren't visible to any other scripts. I do this so that we create the buttonEvent handler only once, instead of making it be reparsed/recreated on each and every blasted loop. Big tip, if you have an event handler assigned once, use an anonymous function. If you're assigning it a bunch of times, make it a real named function. Then we loop through and show all the "scripting only" functionality, in this case the new window vs current window checkboxes. The event handler first prevents the form submit. "Event.currentTarget" would be the clicked button, so we grab the form data of the parent form tag. "Element.closest" is a method a lot of programmers jump through crazy hoops to deal with. By using it and currentTarget, we're able to get the values on the fly in a form neutral manner. We then get and store the site value since it's used more than once, and if that value exists (many of yours didn't) we create the target href using the button's value. If "newTab" is set, open a new window, otherwise navigate the current window to the target. After that we just loop to attach the event. The script is set up to be class="redirect" triggered so you could make more than one of these forms on a page, instead of having to hardcode each and every single one's scripting handler. I'll attach a .zip of this with some modern CSS. Attached File(s) scrabble.redirect.rar ( 1.54k ) Number of downloads: 1 |
coothead |
Jan 19 2023, 01:42 PM
Post
#7
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Scrabble,
coothead |
Christian J |
Jan 19 2023, 04:13 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
your use of "id" is invalid since id's cannot contain slashes, colons, or any of the other special characters found in a URI. Colons are actually allowed even in HTML4: https://www.w3.org/TR/html401/types.html#type-name HTML5 allows everything except spaces and quote characters: https://html.spec.whatwg.org/multipage/dom....he-id-attribute Even this seems to validate as HTML5: CODE <p id="http://foo.com\bar"> |
Jason Knight |
Jan 19 2023, 11:03 PM
Post
#9
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
Even this seems to validate as HTML5: Ok, the universe has to have skipped a ***ing groove. That completely conflicts with their namespace requirements in CSS... especially colons and periods. Why would it allow characters that mean something in CSS?!? What happened to CNAME, restricting you to [/w-]?!? I can't even find CNAME existing, even on you guy's 4 reference which is where I got my understanding of it from decades past?!? There was CNAME and CDATA... One has completely disappeared from this reality? Is my brain just manufacturing decades old information, conversations, websites, and details right down to there being an actual blasted name for it?!? This is like the tenth thing this week that's been like this, that I KNOW for a fact I read, or had supporting info of. Next you'll be telling me the bears are stained evangelicals. I swear I'm hopping realities with all the frequency of a cheap AM radio. |
pandy |
Jan 20 2023, 02:06 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
It isn't CSS. It's HTML.
|
CharlesEF |
Jan 20 2023, 04:06 AM
Post
#11
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Attached is a page that does what you want, I think, I did change your logic. Try it out and post back if you have any questions.
temp.htm ( 3.33k ) Number of downloads: 2672 |
Christian J |
Jan 20 2023, 10:28 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
That completely conflicts with their namespace requirements in CSS... especially colons and periods. Why would it allow characters that mean something in CSS?!? To use such characters in CSS or JS they need to be escaped: https://mathiasbynens.be/notes/css-escapes (I suppose this can be fun in a geeky way. Or not. ) QUOTE There was CNAME and CDATA... One has completely disappeared from this reality? You're not thinking of https://en.wikipedia.org/wiki/CNAME_record ? |
Scrabble |
Jan 23 2023, 07:24 PM
Post
#13
|
Group: Members Posts: 4 Joined: 18-January 23 Member No.: 28,755 |
Hi there Scrabble,
coothead I apologize for not getting back sooner. Jason, I get an error every time I try to download your file. CharlesEF, thank you for your response. That is exactly how I want it to look, simple, and compact. Coothead, I can work with what you have done. I genuinely thank everyone. This post has been edited by Scrabble: Jan 23 2023, 07:25 PM |
Jason Knight |
Jan 25 2023, 04:41 AM
Post
#14
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
Not sure why the forums mangled my share, here's a link to my server:
https://cutcodedown.com/for_others/scrabble/ |
Lo-Fi Version | Time is now: 26th September 2024 - 12:44 AM |