The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Open the correct URL based on radio button and button selection
Scrabble
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2023, 07:48 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,380
Joined: 9-August 06
Member No.: 6



For me nothing at all happens when I click the buttons.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scrabble
post Jan 18 2023, 08:11 PM
Post #3





Group: Members
Posts: 4
Joined: 18-January 23
Member No.: 28,755



QUOTE(pandy @ Jan 18 2023, 07:48 PM) *

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="https://stocktwits.com/symbol/" value="https://stocktwits.com/symbol/" checked><label for="1StockTwits">StockTwits</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="https://finance.yahoo.com/quote/" value="https://finance.yahoo.com/quote/"><label for="2Yahoo">Yahoo</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="3SECFilings" value="https://fintel.io/sfs/us/"><label for="3SECFilings">SEC Filings</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="4Offerings" value=""><label for="4Offerings">Offerings</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="5Dividends" value=""><label for="5Dividends">Dividends</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="6Splits" value="https://www.stocksplithistory.com/?symbol="><label for="6Splits">Splits</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="7Options" value=""><label for="7Options">Options</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="8ShortInterest" value="https://shortsqueeze.com//shortinterest/stock/term2.php?s="><label for="8ShortInterest">Short Interest</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="9Float" value=""><label for="9Float">Float</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="10Ownership" value=""><label for="10Ownership">Ownership</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="11Historical" value=""><label for="11Historical">Historical</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="12Earnings" value=""><label for="12Earnings">Earnings</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="SiteChoice" id="13Titan" value="https://www.stocktitan.net/news/"><label for="13Titan">Stock Titan</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center>
<br>
<button onclick="opentabs()" id="ANET" name="TickerLookup" value="ANET">Arista Networks</button>&nbsp;
<button onclick="opentabs()" id="APDN" name="TickerLookup" value="APDN">Applied DNA Sciences</button>&nbsp;
<button onclick="opentabs()" id="AVYA" name="TickerLookup" value="AVYA">Avaya</button>&nbsp;
<button onclick="opentabs()" id="BJ" name="TickerLookup" value="BJ">BJ's Wholesale Club</button>&nbsp;
<button onclick="opentabs()" id="KO" name="TickerLookup" value="KO">Coca-Cola</button>&nbsp;
<button onclick="opentabs()" id="LMT" name="TickerLookup" value="LMT">Lockheed Martin</button>&nbsp;
<button onclick="opentabs()" id="MNKD" name="TickerLookup" value="MNKD">Mannkind Corporation</button>&nbsp;
<button onclick="opentabs()" id="NEE" name="TickerLookup" value="NEE">NextEra Energy</button>&nbsp;
<button onclick="opentabs()" id="TGTX" name="TickerLookup" value="TGTX">TG Therapeutics</button>&nbsp;
<button onclick="opentabs()" id="XRX" name="TickerLookup" value="XRX">Xerox</button>&nbsp;

<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 18 2023, 08:16 PM
Post #4


Newbie
*

Group: Members
Posts: 18
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there Scrabble,

checkout the attachment it may suit your requirements.

Attached File  Scrabble.zip ( 1.86k ) Number of downloads: 15



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scrabble
post Jan 18 2023, 08:59 PM
Post #5





Group: Members
Posts: 4
Joined: 18-January 23
Member No.: 28,755



QUOTE(coothead @ Jan 18 2023, 08:16 PM) *

Hi there Scrabble,

checkout the attachment it may suit your requirements.

Attached File  Scrabble.zip ( 1.86k ) Number of downloads: 15



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 19 2023, 12:40 PM
Post #6


Member
***

Group: Members
Posts: 41
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)
Attached File  scrabble.redirect.rar ( 1.54k ) Number of downloads: 1
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 19 2023, 01:42 PM
Post #7


Newbie
*

Group: Members
Posts: 18
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there Scrabble,

I will assume that deathshadow's solution wil be much more
professional than mine, so if you find it to be so, then use it.

I dont know whether he has made any allowances for the
queries that you raised in your post #5, so I will give you
my rather amateur solution in the attachment.

Attached File  Scrabble_v2.zip ( 2.12k ) Number of downloads: 14




coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 19 2023, 04:13 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,286
Joined: 10-August 06
Member No.: 7



QUOTE(Jason Knight @ Jan 19 2023, 06:40 PM) *

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

wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 19 2023, 11:03 PM
Post #9


Member
***

Group: Members
Posts: 41
Joined: 25-December 22
Member No.: 28,719



QUOTE(Christian J @ Jan 19 2023, 04:13 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 20 2023, 02:06 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,380
Joined: 9-August 06
Member No.: 6



It isn't CSS. It's HTML.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 20 2023, 04:06 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 1,937
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.

Attached File  temp.htm ( 3.33k ) Number of downloads: 13
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 20 2023, 10:28 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,286
Joined: 10-August 06
Member No.: 7



QUOTE(Jason Knight @ Jan 20 2023, 05:03 AM) *

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. blink.gif )

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 ? unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scrabble
post Jan 23 2023, 07:24 PM
Post #13





Group: Members
Posts: 4
Joined: 18-January 23
Member No.: 28,755



QUOTE(coothead @ Jan 19 2023, 01:42 PM) *

Hi there Scrabble,

I will assume that deathshadow's solution wil be much more
professional than mine, so if you find it to be so, then use it.

I dont know whether he has made any allowances for the
queries that you raised in your post #5, so I will give you
my rather amateur solution in the attachment.

Attached File  Scrabble_v2.zip ( 2.12k ) Number of downloads: 14




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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Yesterday, 04:41 AM
Post #14


Member
***

Group: Members
Posts: 41
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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th January 2023 - 04:51 PM