JS Visibility from Radio button..?

joanzn · 02-09-2011, 08:12 PM

I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

it's so "Are you married?" "Yes" "No" (no is default checked)
when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
any help much appreciated.

Thanks!

Philip M · 02-09-2011, 08:55 PM

You arre not very specific, but this example should move you forward:-

Code:

<html>
<head>
<script type = "text/javascript">

var rowCount=1;

function addRow() {
rowCount++;

var content1='<input type="text" name="text'+rowCount+'A" value = "ABC">';
var content2='<input type="text" name="text'+rowCount+'B" value = "DEF">';
var content3='<input type="text" name="text'+rowCount+'C" value = "GHJ">';
var content4='<input type="text" name="text'+rowCount+'D" value = "KLM">';

tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
cell4.innerHTML=content4;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
tabBody.appendChild(row);
}

function getRows() {
var x = document.myform.addNewRow.value;
document.myform.addNewRow.value = 0;
for (var i = 1; i <=x; i++) {
addRow('mytable');
}

}

</script>

</head>
<body>

<form name = "myform">
<select name = "addNewRow" id = "addNewRow" onchange = "getRows()">
<option value="0">Select Number Of Rows To Add</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br><br>

<table id='mytable'>
<tbody>

<TR>
<TD><b>COLUMN 1</b></TD>
<TD><b>COLUMN 2</b></TD>
<TD><b>COLUMN 3</b></TD>
<TD><b>COLUMN 4</b></TD>
</TR>

<TR>
<TD><input name="text1A" value = "ABC"></TD>
<TD><input name="text1B" value = "DEF"></TD>
<TD><input name="text1C" value = "GHJ"></TD>
<TD><input name="text1D" value = "KLM"></TD>

</TR>

</tbody>
</table>
</form>
</body>
</html>

"Knowledge is of no value unless you put it into practice.” -Anton Chekhov (Russian playwright and master of the modern short story, 1860-1904)

joanzn · 02-09-2011, 09:15 PM

Thanks for that!
it definitely helps me visualize the right track but your right i could've explained better.

-----> Here is a better look at the form <----

And on there you'll see the "Are you married?" question pretty close to the top..
the 3 rows after that(Spous's Name, job, b-day) are the ones I want to hide and show at will of the "Are you Married?" radio buttons.. hope that makes more sense ..
like if you click the yes button those three rows will show and if you hit no they'll collapse..
Thanks Again!

Philip M · 02-10-2011, 08:39 AM

It is far easier to place the three questions in a div which you show/hide according to the radio button selection:

Code:

<form name = "myform">

Are you married? <input type = "radio" name = "rad1" onclick = "showDiv()" >Yes
<input type = "radio" name = "rad1" onclick = "showDiv()" >No

<div id = "mydiv" style="display:none">
Spouse Name <input type = "text" name = "spname"><br>
Spouse Job <input type = "text" name = "spjob"><br>
Spouse Birthday <input type = "text" name ="spbday"><br>
</div>

</form>

<script type = "text/javascript">
function showDiv() {
var f = document.myform;
f.spname.value = "";  // clear the entries if "No" selected"
f.spjob.value = "";
f.spbday.value = "";
var d = document.getElementById("mydiv");
d.style.display="none";
if (document.myform.rad1[0].checked) {  // show div if "Yes" selected
d.style.display="block";
}
}
</script>

Kor · 02-10-2011, 12:54 PM

Take care. The fact that a form's control is hidden (with display:none or visibility:hidden) does not move him away from the submit query (in case you want to send data to a data base). Whenever you make a control hidden, make sure to make it disabled (and, maybe, give him back his default value). And, when make it visible again, remove its disabled property

Code:

form_element.style.display='none';
form_element.value=form_element.defaultValue;
form_element.setAttribute('disabled','disabled');
//
form_element.style.display='';
form_element.removeAttribute('disabled');

joanzn · 02-10-2011, 04:43 PM

I did exactly wut u said with the div just ended the tbody and table after the radio buttons and started a new table and tbody with the div wrapping it.. THANK YOU!

I'm dealing with some crapper coded structure (of course) so I've been editing it the best I can along the way trying to get the JS to work. FINALLY!

THANK YOU AGAIN

Philip M · 02-10-2011, 04:56 PM

Quote:

Originally Posted by Kor

Take care. The fact that a form's control is hidden (with display:none or visibility:hidden) does not move him away from the submit query (in case you want to send data to a data base). Whenever you make a control hidden, make sure to make it disabled (and, maybe, give him back his default value). And, when make it visible again, remove its disabled property

Code:

form_element.style.display='none';
form_element.value=form_element.defaultValue;
form_element.setAttribute('disabled','disabled');
//
form_element.style.display='';
form_element.removeAttribute('disabled');

Why bother to disable the form fields if they are hidden? Rather do what I have suggested and switch to the default values of "" if the user changes his radio button selection to "no".

Kor · 02-11-2011, 08:52 AM

Quote:

Originally Posted by Philip M

Why bother to disable the form fields if they are hidden? Rather do what I have suggested and switch to the default values of "" if the user changes his radio button selection to "no".

And what about if some radio buttons are to be hidden?

Isn't it better to have a general approach for all kind of elements?

Philip M · 02-11-2011, 03:34 PM

Quote:

Originally Posted by Kor

And what about if some radio buttons are to be hidden?

Isn't it better to have a general approach for all kind of elements?

Why make up imaginary difficulties?

There is no suggestion that the radio buttons are to be hidden.

But I agree that there is no harm in disabling the textboxes as well as clearing them. It just seems superfluous.