Question

I have written a javascript function.

function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}

I have a checkbox after the Well Modification <td> as given below,

<tr>
  <td>On Call</td>
  <td><html:checkbox property="onCall"/></td>
  <td>Well Modification</td>
  <td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>

When that checkbox is clicked I want the drop down list given under the div id=wellDropDown to be displayed. Defaultly, if the check box is not clicked, the drop down should not be displayed.

<tr>
  <td>Active</td>
  <td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
  <td>     
    <html:select property="wellFormatId">
    <html:option value="">(Select)</html:option>
    <bean:define id="wellFormatColl"  name="wellFormats" scope="request"/>
    <logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type="com.astrazeneca.compis.data.WellFormatVO">
        <% Long wellId = wellFormats.getWellFormatId();%>
        <% String wellIdNo = wellId.toString(); %>
        <html:option value="<%=wellIdNo%>">
        <bean:write name="wellFormats" property="wellFormatName"/>
        </html:option>
    </logic:iterate>
    </html:select>
  </td>
 </div>
</tr>

When I tried executing this code, I could see the drop down list getting displayed irrespective of the checkbox checked or not.

Where I have went wrong in this scenario? Please give ur suggestions or ways to implement my requirement.

Answer 1

Your HTML is invalid. You may not have a div enclose a td like this. Either make the td itself visible or invisible, or put the div inside the td, instead of putting it around the td.

Also, unless wellDropDown is a global JS variable, the code should be

document.getElementById("wellDropDown").style.visibility = 'visible';