B
Bill
Hello,
I'm trying to hide a DIV tag based on a selection. I have two
functions (prob could be condensed to one) that displays form fields
based on the selections of radiobuttons. The first (top level)
section displays a second radio group - which displays a separate DIV
tag based on its selections. I'd like to hide the second section
based on selection of the top level. I've tried using the "hidden"
style attribute, but it's not working.
<script type="text/javascript">
var currentData = null;
function showData(id) {
if (currentData!=null && currentData.id==id) { // already showing
return;
}
var container = document.getElementById("container");
if (currentData!=null) {
container.appendChild(currentData); // move currentData back to
container
}
var custom = document.getElementById("questiontype");
var data = document.getElementById(id);
custom.appendChild(data);
currentData = data;
//I'd like to hide container2 if "order" DIV not selected/showing
}
var currentData2 = null;
function showData2(id) {
if (currentData2!=null && currentData2.id==id) { // already showing
return;
}
var container2 = document.getElementById("container2");
if (currentData2!=null) {
container2.appendChild(currentData2); // move currentData back
to container
}
var custom = document.getElementById("ordertype");
var data = document.getElementById(id);
custom.appendChild(data);
currentData2 = data;
}
</script>
// High level container,
<div id="container" style="display:none;">
<div id="gen">
<p>gen form stuff</p>
</div>
<div id="order">
<input type="radio" name="R2" value="rdoCredStatus"
onClick="showData2('credit')">Credit Request>
<input type="radio" name="R2" value="rdoOrderStatus"
onClick="showData2('order2')">Order Status>
</div>
<div id="tech">
<p>tech form stuff</p>
</div>
</div>
//secondary container shown when radio in "order" DIV is selected -
should be hidden when "order" not selected
<div id="container2" style="display:none;">
<div id="credit">
<p>secondary credit stuff</p>
</div>
<div id="order2">
<p>secondary order stuff</p>
</div>
</div>
I'm trying to hide a DIV tag based on a selection. I have two
functions (prob could be condensed to one) that displays form fields
based on the selections of radiobuttons. The first (top level)
section displays a second radio group - which displays a separate DIV
tag based on its selections. I'd like to hide the second section
based on selection of the top level. I've tried using the "hidden"
style attribute, but it's not working.
<script type="text/javascript">
var currentData = null;
function showData(id) {
if (currentData!=null && currentData.id==id) { // already showing
return;
}
var container = document.getElementById("container");
if (currentData!=null) {
container.appendChild(currentData); // move currentData back to
container
}
var custom = document.getElementById("questiontype");
var data = document.getElementById(id);
custom.appendChild(data);
currentData = data;
//I'd like to hide container2 if "order" DIV not selected/showing
}
var currentData2 = null;
function showData2(id) {
if (currentData2!=null && currentData2.id==id) { // already showing
return;
}
var container2 = document.getElementById("container2");
if (currentData2!=null) {
container2.appendChild(currentData2); // move currentData back
to container
}
var custom = document.getElementById("ordertype");
var data = document.getElementById(id);
custom.appendChild(data);
currentData2 = data;
}
</script>
// High level container,
<div id="container" style="display:none;">
<div id="gen">
<p>gen form stuff</p>
</div>
<div id="order">
<input type="radio" name="R2" value="rdoCredStatus"
onClick="showData2('credit')">Credit Request>
<input type="radio" name="R2" value="rdoOrderStatus"
onClick="showData2('order2')">Order Status>
</div>
<div id="tech">
<p>tech form stuff</p>
</div>
</div>
//secondary container shown when radio in "order" DIV is selected -
should be hidden when "order" not selected
<div id="container2" style="display:none;">
<div id="credit">
<p>secondary credit stuff</p>
</div>
<div id="order2">
<p>secondary order stuff</p>
</div>
</div>