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>
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;
Thanks!
Open in new window
I tried the below but not returning anything?
Open in new window