Wednesday, September 19, 2012

show/hide html component using java script


HTML Code: 

<TD>
<s:select id="dateTargetWriteOffComparitor" 
onchange="showHide('dateTargetWriteOffComparitor','toDateOfTarget')"
value="searchDateCriteriaOperators[0]"
list="searchDateCriteriaOperators"
name="dateTargetWriteOffComparitor" />
</TD>

<TD height="23" width="91"> 
    <sj:datepicker name="dateOfTarget" displayFormat="mm-dd-yy" style="width: 80px;" />

<div id="toDateOfTarget" style="display: none;">
   <sj:datepicker name="toDateOfTarget" displayFormat="mm-dd-yy" style="width: 80px; " />
</div>


Java Script Code: 


function showHide(htmlComp,target){
var listValue=document.getElementById(htmlComp).value;  
if(listValue=='Between'){
document.getElementById(target).style.display = 'block';
}else{
document.getElementById(target).style.display = 'none';
}
}