show/hide form fields

Lori · #1 (**permalink**) 08-01-2008, 11:59 AM

Hello,

I've created a form that has several checkboxes and then some questions related to the checkboxes. What I would like is for the related questions to be hidden until the checkbox is selected, then the addition questions for - that check box only - would appear. Is this something that can be done in javascript and can someone help me figure out how to build it?

Here's what I have so far:
<code>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Badgering</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Hide div w/id extra
$("#extra").css("display","none");

// Add onclick handler to checkbox w/id checkme
$("#checkme").click(function(){

// If checked
if ($("#checkme").is(":checked"))
{
//show the hidden div
$("#extra").show("fast");
}
else
{
//otherwise, hide it
$("#extra").hide("fast");
}
});

});
</script>
<style type="text/css">

</style>

</head>

<body>
<form>
<table>
<tr><td class=m><label for "Badgering">Badgering</label></td>
<td class=m><input type=checkbox size=10 name=_fid_12 />
<div id="extra">
<table>
<tr>
<td width="15"></td>
<td width="85">Timestamp(s)</td>
<td class="m" width="288"><input type="text" size="40" name="_fid_28"></td>
</tr>
</table>
</td>
</tr>
</div>
</table>
</form>
</body>

</html>
</code>

Thanks,
Lori

curtiss · #2 (**permalink**) 08-01-2008, 08:12 PM

It sure can. Here's basically what you would do:

Code:

<input type="checkbox" name="cb" id="cb1" value="1" onchange="showfield(this)" />
<input type="checkbox" name="cb" id="cb2" value="2" onchange="showfield(this)" />
<input type="text" name="text1" id="text1" />
<input type="text" name="text2" id="text2" />
<script type="text/javascript" language="javascript">
function showfield(what) {
if(what.id = "cb1" && what.checked) {
document.getElementById('text1').style.display = "inline";
}
else if(what.id = "cb1" && !what.checked) {
document.getElementById('text1').style.display = "none";
}
else if(what.id = "cb2" && what.checked) {
document.getElementById('text2').style.display = "inline";
}
else if(what.id = "cb2" && !what.checked) {
document.getElementById('text2').style.display = "none";
}
else {
document.getElementById('text1').style.display = "none";
document.getElementById('text2').style.display = "none";
}
}
</script>

I haven't tested that code, but it should work. It's not the most efficient or effective function I could've written, but it's decent enough to get you started.

Lori · #3 (**permalink**) 08-04-2008, 08:18 AM

I'm getting syntax errors returned and I'm not able to make it work. I imagine it's something to do with how I've incorporated the code into my form as your code looks fine to me. Here's what I'm doing minus much of the normal HTML:

Code:

<script type="text/javascript">
<input type="checkbox" name="cb" id="cb1" value="1" onchange="showfield(this)" />
<input type="checkbox" name="cb" id="cb2" value="2" onchange="showfield(this)" />
<input type="text" name="text1" id="text1" />
<input type="text" name="text2" id="text2" />
<script type="text/javascript" language="javascript">
function showfield(what) {
if(what.id = "cb1" && what.checked) {
document.getElementById('text1').style.display = "inline";
}
else if(what.id = "cb1" && !what.checked) {
document.getElementById('text1').style.display = "none";
}
else if(what.id = "cb2" && what.checked) {
document.getElementById('text2').style.display = "inline";
}
else if(what.id = "cb2" && !what.checked) {
document.getElementById('text2').style.display = "none";
}
else {
document.getElementById('text1').style.display = "none";
document.getElementById('text2').style.display = "none";
}
}
</script>

<table>
	<tr>
		<td class=m>Badgering</td>
		<td class=m><input type=checkbox size=10 name=cb1>	
		<td>Timestamp(s)</td>
		<td class="m"><input type="text" size="40" name="text1"></td>	
		
	</tr>
</div>
<tr>
	<td class=m>Credit(s) Promised</td>
	<td class=m><input type=checkbox size=10 name=cb2>
			<td width="85">Timestamp(s)</td>
			<td class=m><input type="text" size="40" name="text2"></td>
			<td class=m>Credit Amount</td>
			<td class=m><input type=text size=10 name=_fid_14 ></td>
			<td class=m>Credit Applied</td>

			<td class=m><select  name=_fid_15 >
				<option></option>
				<option>Yes</option>
				<option>No</option>
			</select>
		</td>
		
</tr>

</table>

Thanks again

curtiss · #4 (**permalink**) 08-04-2008, 05:04 PM

The problem is within the code I provided, which carried over to the code you are using.

Sorry, I sometimes forget which language I'm coding in, and use the wrong constructs.

Try it this way:

Code:

<script type="text/javascript" language="javascript">
function showfield(what) {
if(what.id == "cb1" && what.checked) {
document.getElementById('text1').style.display = "inline";
}
else if(what.id == "cb1" && !what.checked) {
document.getElementById('text1').style.display = "none";
}
else if(what.id == "cb2" && what.checked) {
document.getElementById('text2').style.display = "inline";
}
else if(what.id == "cb2" && !what.checked) {
document.getElementById('text2').style.display = "none";
}
else {
document.getElementById('text1').style.display = "none";
document.getElementById('text2').style.display = "none";
}
}
</script>

In javascript, a single equal sign will assign the value on the right to the variable on the left. In order to test equivalency, you need two equal signs, together.

Doing a lot of work in VBScript, recently, which uses a single equal sign for everything.