Avatar of MJ
MJ
Flag for United States of America asked on

JavaScript: Get Selected Radio Button Text from Sets of Two

How do I get the selected text from these radio buttons using JavaScript only? I can't modify the code on the page, I have to use a Tag Manager to inject my code. The radio buttons are in sets of two (separated by a line of forward slashes with comments below) .  The div class is iradio minimal checked for the selected radio button.  I want to grab the text of the span id="LocalizableLabel[#]"  for example: span id="LocalizableLabel2" in the first example holds "Personal". Another catch is if the user selects "Business" from the first set of radio buttons, the second set of radio buttons (LocalizableLabel3 & LocalizableLabel4) won't be visible but are still there in the mark-up. The third set of radio buttons still maintains the ids of LocalizableLabel5 & LocalizableLabel6 regardless and are hidden until previous selections are made. 

///// The below two radio buttons will always be visible //////

<label for="PersonalBanking" class="">
    <div class="iradio_minimal checked" style="position: relative;"><input value="C" name="BusinessOrPersonal" type="radio" id="PersonalBanking" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel1">Personal</span>
</label>

<label for="BusinessBanking" class="">
    <div class="iradio_minimal" style="position: relative;"><input value="B" name="BusinessOrPersonal" type="radio" id="BusinessBanking" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel2">Business</span>
</label>

///////////// The below two radio buttons won't be visible if Business is selected above or until "Personal" is selected /////////////////////

<label for="DebitCardY" class="">
    <div class="iradio_minimal checked" style="position: relative;"><input value="Y" name="DebitCardYN" type="radio" id="DebitCardY" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel3">Yes</span>
</label>

<label for="DebitCardN" class="hover">
    <div class="iradio_minimal hover" style="position: relative;"><input value="N" name="DebitCardYN" type="radio" id="DebitCardN" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel4">No</span>
</label>

///////////The below two radio buttons will not be visible until selections above are made /////

<label for="ssnYesRadio" class="">
    <div class="iradio_minimal checked" style="position: relative;"><input value="Y" name="SsnYesNo" type="radio" id="ssnYesRadio" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel5">Yes</span>
</label>

<label for="ssnNoRadio" class="">
    <div class="iradio_minimal" style="position: relative;"><input value="N" name="SsnYesNo" type="radio" id="ssnNoRadio" aria-describedby="SsnOptionsNote" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
    <span id="LocalizableLabel6">No</span>
</label>

Open in new window

I can attach the code to run onClick of the "continue" button. At this point all selections need to be made. In a nut shell, I need to know the text content of a class of iradio minimal checked with a span of id=Localizable# (# is placeholder for a number). Something along these lines, I know this doesn't work:

document.querySelectorAll("iradio_minimal checked").getElementsByTagName("span").textContent;

Open in new window

Thanks!

JavaScriptWeb Development

Avatar of undefined
Last Comment
MJ

8/22/2022 - Mon
MJ

ASKER
Something like this gets me the the text of the first set of radio buttons but I want all of the selected radio buttons text, not just the first set.
var activeRadio = document.getElementsByClassName('iradio_minimal checked')[0],
activeNextSibling = activeRadio.nextElementSibling;
activeNextSiblingText = activeNextSibling.textContent;
console.log(activeNextSiblingText);

Open in new window


I tried the below but not returning anything?
   function _dtmTrackRadioSelections() {

       var arr_a = document.querySelectorAll('iradio_minimal.checked');
       var element = null;
       for (var i = 0; i < arr_a.length; i++) {
           element = arr_a[i];
           activeNextSibling = element.nextElementSibling;
           activeNextSiblingText = activeNextSibling.textContent;
           console.log(activeNextSiblingText)
       }
 };
   
   _dtmTrackRadioSelections();

Open in new window

ASKER CERTIFIED SOLUTION
MJ

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck