I have combo box which needs to be displayed based on the option i select,
but when i set display none to div it is not getting hidden. what could be the problem.
below is the html code and java script
<div id="addBanks" style="display: none" style="overflow: auto;height: 75%">
<table id="commonBodyTable" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="100%" align="center" class="tableBorder2" border="0" cellpadding="2" cellspacing="0">
<tr>
<td colspan="4" class="mainheader">Add Banks</td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Bank Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="bankcode" id="bankcode" maxlength="20" /></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">Bank Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="bankname" id="bankname" maxlength="20" /></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Branch Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="branchcode" id="branchcode" maxlength="20" /></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">IFSC Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="ifsccode" id="ifsccode" maxlength="20" /></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Country</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" class="textfieldalign"><select class="combobox" name="countryid" id="countryid" onchange="getStates(this.value)">
<option value="" >- - - Select Country Name - - -</option>
</select></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">State</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" class="textfieldalign"><select class="combobox" name="stateid" id="stateid">
<option value="" >- - - Select State Name - - -</option>
</select></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">District Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="districtid" id="districtid">
<option value="" >- - - Select District Name - - -</option>
</select></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">Town or Village</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign">
Town <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="townOpt" onclick="enableVillageOrTown(this)"/>
Village <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="villageOpt" onclick="enableVillageOrTown(this)"/>
</td>
</tr>
<div id="villageDiv" style="display: none;">
<tr class="darkrow">
<td width="30%" class="textalign">Village Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="villageid" id="villageid">
<option value="" >- - - Select Village Name - - -</option>
</select></td>
</tr>
</div>
<tr class="darkrow">
<div id="townDiv" style="display: none;">
<td width="30%" class="textalign">Town Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="townid" id="townid">
<option value="" >- - - Select Town Name - - -</option>
</select></td>
</div>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign"> </td>
<td width="5%" class="mandatory"> </td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="button" class="submitbu" name="save" id="save" value="Save" onclick="saveState()">
<input type="button" class="submitbu" name="cancel" id="cancel" value="Cancel" onclick="cancelAddState();"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and my java script :
function enableVillageOrTown(opt){
var optionValue = opt.value;
if(optionValue=='townOpt'){
document.getElementById("townDiv").style.display = "";
document.getElementById("villageDiv").style.display = 'none';
}
if(optionValue=='villageOpt'){
document.getElementById("villageDiv").style.display = "";
document.getElementById("townDiv").style.display = 'none';
}
}
UPDATE :
<div id="villageDiv" style="display: none;">
<tr class="darkrow">
<td width="30%" class="textalign">Village Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="villageid" id="villageid">
<option value="" >- - - Select Village Name - - -</option>
</select></td>
</tr>
</div>
also this is not properly aligned when
<tr class="lightrow">
<td width="30%" class="textalign">Town or Village</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign">
Town <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="townOpt" onclick="enableVillageOrTown(this)"/>
Village <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="villageOpt" onclick="enableVillageOrTown(this)"/>
</td>
</tr>
this is not hidden when the page first time loads
Please help me to find the problem
Regards
Try this code, if it works for you
For that your should use this code for HTML