AEM 6.5 guideBridge API to hide and show based some value checkbox options

Forum|Forum|3 years ago
February 16, 2023
3 replies
1926 views

Hello ,

Could you please provide input as how to show and hide based on radio option values using guideBridge

I having the below html

</span>

radioOption2

</span>

</label>

</div>

</span>

radioOption2

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SivakumarKanoori

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

@srinivas_chann1

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");
}

}
}