<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>First Program</title>
<script>
function trigger() {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="none";
document.getElementById('div4').style.display="none";
}
function load() {
if(document.forms['form1']['form1:select2'][0].checked == true){
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
}
else if(document.forms['form1']['form1:select2'][1].checked == true){
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
}
function load2(val) {
if(val=="First"){
document.getElementById('div3').style.display="block";
document.getElementById('div4').style.display="none";
}
else if(val=="Second"){
document.getElementById('div3').style.display="none";
document.getElementById('div4').style.display="block";
}
}
</script>
</h:head>
<h:body onload="trigger()">
<h:form id="form1">
<div align="left">
<h:outputText value="Using onclick" style="color:red;font-size:1em;"></h:outputText>
<h:selectOneRadio id="select2" onclick="load()">
<f:selectItem itemLabel="For Hi" itemValue="First"></f:selectItem>
<f:selectItem itemLabel="For Hello" itemValue="Second"></f:selectItem>
</h:selectOneRadio>
<br/>
<div id="div1" style="color: red;">Hiii...</div>
<div id="div2" style="color: red;">Hello...</div>
</div>
<hr/>
<div align="left">
<h:outputText value="Using onchange" style="color:blue;"></h:outputText>
<h:selectOneRadio id="select" onchange="load2(this.value)">
<f:selectItem itemLabel="For Hi" itemValue="First"></f:selectItem>
<f:selectItem itemLabel="For Hello" itemValue="Second"></f:selectItem>
</h:selectOneRadio>
<br/>
<div id="div3" style="color: blue;">Hiii...</div>
<div id="div4" style="color: blue;">Hello...</div>
</div>
</h:form>
</h:body>
</html>
Thanks for Reading...
Keep Smile Always...through JavaScript
