Hello ,
Could you please provide input as how to show and hide based on radio option values using guideBridge
I having the below html
<div class="guideFieldWidget guideFieldVerticalAlignment col-12 CheckBox" data-original-title="" title="">
<label class="guideRadio guideRadioButtonItem radioOption topup-type" data-id="2" data-original-title="" title="" role="radio" name="guideContainer-rootPanel" tabindex="0" aria-label="radioOption2" aria-required="true" aria-checked="false" placeholder="">
<span class="guideRadioInput">
<input type="radio" id="guideContainer-rootPanel-progressPanel-" data-element-name="radioOption" name="radioOption" value="1" element-name="radioOption" aria-required="true" style="position: relative;">
<span class="guideRadioControl"></span>
</span>
<span class="guideRadioLabel">
radioOption2
<span class="guideRadioCaption">Use this 1</span>
</span>
</label>
</div>
<div class="guideFieldWidget guideFieldVerticalAlignment col-12 CheckBox" data-original-title="" title="">
<label class="guideRadio guideRadioButtonItem radioOption topup-type" data-id="2" data-original-title="" title="" role="radio" name="guideContainer-rootPanel" tabindex="0" aria-label="radioOption2" aria-required="true" aria-checked="false" placeholder="">
<span class="guideRadioInput">
<input type="radio" id="guideContainer-rootPanel-progressPanel-" data-element-name="radioOption" name="radioOption" value="2" element-name="radioOption" aria-required="true" style="position: relative;">
<span class="guideRadioControl"></span>
</span>
<span class="guideRadioLabel">
radioOption2
<span class="guideRadioCaption">Use this 2</span>
</span>
</label>
</div>
I would want to show and hide this checkbox options based on dynamic value 1 or 2
Please let me know how to implement the below:-
let radioOption= guideBridge.resolveNode("radioOption");
Now if(dyanmicvalue ==1 ){
show radioOption =1
}else {
show radioOption=2
}
Thanks,
Srinivas
Solved! Go to Solution.
Views
Replies
Total Likes
may be you can write custom javascript as below. <you can change as per your use case>
window.onload = function(e){
let dynamicValue = 'CSS';
var radiobuttonClasses = document.getElementsByClassName("radiobutton");
for(var i =0;i< radiobuttonClasses.length ; i++){
radiobuttonClasses[i].classList.add("hidden");
var value = radiobuttonClasses[i].getElementsByTagName('input')[0].value
if (value === dynamicValue){
radiobuttonClasses[i].classList.remove("hidden");
}
}
}
Hello,
I cannot use the rule editor here , and need to add the code in javascript so how to achieve this using guideBridge API
Thanks,
Srinivas
Use the rule editor, that way you do not have To write any code
so to understand your requirement correctly
RadioOption A contains the following choices
1
2
3
what do you want to do if the selected value is 2?
My requirement is hide tor show before even before any selection .
That is based on some dynamic value I need to hide say option 2,3 and show just 1
Then how to achieve it
Thanks
You cannot hide the values inside the radio button , you will have to just replace the values
You will have to do something like this
radiobutton.values=[“A”,”B”]
Hello,
How to show the below conditions using guidgebridge when we have the html
Assume that we are having a 3 radio buttons mentioned in below html code as per the AEM radio component , but based on javascript input the component that must be shows radio button based on the below check
if(dynamicvalue == HTML){
show radio =HTML;
HIDE radio =CSS;
HIDE radio=JavaScript;
}
if(dynamicvalue==CSS && dynamicvalue == HTML){
show radio =CSS;
show radio =HTML;
HIDE radio=JavaScript;
}
/////////////////////////////////////////////////////////////////////////////////////////////
Assuming the Component had the below code while form rendering
<div class="radiobutton">
<input type="radio" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
</div>
<div class="radiobutton">
<input type="radio" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
</div>
<div class="radiobutton">
<input type="radio" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</div>
Thanks
may be you can write custom javascript as below. <you can change as per your use case>
window.onload = function(e){
let dynamicValue = 'CSS';
var radiobuttonClasses = document.getElementsByClassName("radiobutton");
for(var i =0;i< radiobuttonClasses.length ; i++){
radiobuttonClasses[i].classList.add("hidden");
var value = radiobuttonClasses[i].getElementsByTagName('input')[0].value
if (value === dynamicValue){
radiobuttonClasses[i].classList.remove("hidden");
}
}
}
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies