Advo wrote:
Basically, ive got information in a table for the layout purposes, as
its text for a questionnaire
What i Need, is for instance when the user click a radio button, that
information can be hidden.
I tried
<div id="myarea" style="visibility:hidden"><STRONG><font
color="#4475AA"Question 2:</font></STRONG></divetc
and that works.
but as soon as i try and have a few things with the id myarea so i can
hide text, textareas, images etc within that, it will only hide or show
one item when i do:
<input type=radio name=mytest value=mytest3
onClick='document.getElementById("myarea").style.v isibility =
"visible";'I disagree </input><br>
An input element has no content or end tag, it is forbidden:
<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT>
It is also not a good idea to use a radio button by itself (if that's
what you are doing) as once it is checked, you can't uncheck it. A
checkbox is probably more appropriate, then toggle the visibility of
'myarea' depending on whether the checkbox is selected or not:
You might try something like:
<label for="mytest"><input type="checkbox" value=mytest3
name="mytest" id="mytest"
onclick="toggleVis(this.checked, 'myarea');"
I disagree </label>
<script type="text/javascript">
function toggleVis(val, id)
{
var el = document.getElementById(id);
var o;
if ( el && (o = el.style) ){
o.visibility = (val)? 'visible' : 'hidden';
}
}
</script>
However you will still have synchronisation issues in some browsers
when the page is re-loaded - the checkbox may remain checked but the
text gets hidden.
I foolishly tried putting that div at the start of my table cells, and
at the end of that question, but that just died. Any ideas please?
Your problem is likey the result of invalid HTML creating in a DOM that
is different to what you expect (and possibly different in different
browsers too). TD elements can only be children of a TR element, they
can be parents of a div. A div can't be a child (or parent) of a TR.
Your structure should be:
<div>
<table>
...
</table>
</div>
or
<table>
<tr>
<td>
<div... </div>
</td>
</tr>
</table>
Use a validator: <URL:http://validator.w3.org/>
--
Rob
