Reveal input fields when clicking checking a checkbox

Discussion in 'JavaScript' started by mateescu, Oct 23, 2007.

0
  1. #1
    Hello

    On my site I have a page with 5 checkboxes.

    Whenever a checkbox is checked, I would like an input field to appear below that particular checkbox. If I remove the checkmark in that checkbox, the input field would have to dissappear.

    Could you please help me out with a javascript, css or ajax code that can accomplish this task ?

    Thanks in advance.
     
    mateescu, Oct 23, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	function toggleTextBox(nBox){

                nBox.parentNode.nextSibling.value = "";
		nBox.checked ? nBox.parentNode.nextSibling.style.display = "" : nBox.parentNode.nextSibling.style.display = "none";
	}
	
</script>
<style type="text/css">

	body {background-color:#eae3c6;margin-top:60px}
	form {width:620px;margin:auto;font-family:times;font-size:12pt}
	fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb}
	legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
	label {padding: 12px;}
	.box {margin-top: 8px;}	 
	.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
	<body>
		<form action="">
		   <fieldset>
			<legend>Form</legend>
				<label>A: <input type="checkbox" name="boxA" onclick="toggleTextBox(this)" class="box"></label><input type="text" name="forBoxA" size="10" style="display:none;margin-left:10px;"><br>
				<label>B: <input type="checkbox" name="boxB" onclick="toggleTextBox(this)" class="box"></label><input type="text" name="forBoxB" size="10" style="display:none;margin-left:10px;"><br>
				<label>C: <input type="checkbox" name="boxC" onclick="toggleTextBox(this)" class="box"></label><input type="text" name="forBoxC" size="10" style="display:none;margin-left:10px;"><br>
				<label>D: <input type="checkbox" name="boxD" onclick="toggleTextBox(this)" class="box"></label><input type="text" name="forBoxD" size="10" style="display:none;margin-left:10px;"><br>
				<label>E: <input type="checkbox" name="boxE" onclick="toggleTextBox(this)" class="box"></label><input type="text" name="forBoxE" size="10" style="display:none;margin-left:10px;"><br>

				<input type='submit' name='submit' value="Submit" class='submitBtn'>
		   </fieldset>
		</form>
	</body>
</html>
    Code (markup):
     
    Mike H., Oct 23, 2007 IP
  3. gota

    gota Peon

    Messages:
    20
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    There are sorts of way to do this, this is just quick example of one...

    <html>
	<head>
		<title>Untitled Document</title>
		<script type='text/javascript'>
			function inputForm(obj)
			{
				var did = obj.id + '_div';
				var iid = obj.id + '_input';
				var tmp = document.getElementById(did);
				tmp.removeChild(tmp.childNodes[0]);
				var pen = document.createElement('span');

				if (obj.checked)
				{
					var ien = document.createElement('input');
					ien.id = iid;
					ien.name = iid;
					pen.appendChild(ien);
					tmp.style.visibility = 'visible';
				}
				else
				{
					tmp.style.visibility = 'hidden';
				}

				tmp.appendChild(pen);
				return;
			}
		</script>
	</head>
	<body>
		<div align='center'>
			<form>
			<div>would you like to name your favorite color <input type='checkbox' id='color' onclick='inputForm(this);' /></div>
			<div id='color_div' style='visibility : hidden'><span></span></div>
			<div>would you like to name your favorite weekday <input type='checkbox' id='weekday' onclick='inputForm(this);' /></div>
			<div id='weekday_div' style='visibility : hidden'><span></span></div>
			</form>
		</div>
	</body>
</html>
    Code (markup):
     
    gota, Oct 23, 2007 IP