I have a requirement to show/hide a new form variable based on year selected for the year 2011. I initially tried wrapping the table TR tags inside of a DIV in the form.
<div id="togglethis" style="none">
<tr>
<td><label>Mylabel</label></td>
<td><input type="text" name="myfield" /></td>
</tr>
</div>
With this javascript
// Note yr is passed from the form element year radio with
// onclick=(this.value)
function togglethis(yr){
div1 = document.getElementById('togglethis');
if(yr < 2011){
div1.style.display = 'none';
}else{
div1.style.display = 'block';
}
}
But by moving the id to the TR tag and changing the javascript to display = 'table-row' I was able to make it work.
<tr id="togglethis" style="none">
<td><label>Mylabel</label></td>
<td><input type="text" name="myfield" /></td>
</tr>
function togglethis(yr){
div1 = document.getElementById('togglethis');
if(yr < 2011){
div1.style.display = 'none';
}else{
div1.style.display = 'table-row';
//div1.style.display = 'block'; also works and may be better for older browsers.
}
}
Note: only tested for MSIE 8.
