asked on

Reveal Text box and Label in JavaScript

Hello.

Right now when you check the "Have Homeowner insurance" checkbox it reveals a text box. However I want it so that the label of the text is also hidden when the page loads and is revealed when the checkbox is click.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto Quote | Additional Drivers</title>
<link rel="stylesheet" type="text/css" href="../../common/view.css" media="all" />
 
 
 
 
 
 
 
<script language="javascript">
function add(){
var html = document.getElementById('test').innerHTML
document.getElementById('test').innerHTML=html+'<li><label class="description" for="name"><h3>Additional Driver</h3></label></li><li><label class="description" for="name">Name</label><div><input id="addName" name="driver[]" class="element text medium required"  type="text" value=""/></div></li><li><label class="description" for="addDOB">Date of Birth</label><div><input id="addDOB" name="driver[]" class="element text medium required"  type="text" value=""/></div></li><div id="test"></div>';
}
</script>
 
 
 
</head>
 
<body id="main_body" >
	
	<img id="top" src="../../images/top.png" alt="">
	<div id="form_container">
	
		<h1><a><img src="../../images/logo3.png"></a></h1>
		<form id="autoquotenewpage" class="form_1"  method="post" action="autoquote_thanks.php">
					<div class="form_description">
			<h2>Auto Quote</h2>
			<p>Vehicle One: Drivers</p>
		</div>						
<ul>
		<input type="button" value="Add Driver" onclick="return add();" />
		<li><label class="description"><h3>Additional Driver</h3></label></li>
 
		<li>
		<label class="description" for="name">Name</label>
		<div>
			 <input id="addName" name="driver[]" class="element text medium"  type="text" value=""/> 
		</div> 
		</li>
 
 
		<li>
		<label class="description">Date of Birth</label>
		<div>
			 <input id="addDOB" name="driver[]" class="element text medium"  type="text" value=""/> 
		</div> 
		</li>
 
<div id="test"></div>
 
 
			
	<li>
		<label class="description">Additional Credits.</label>
		<span>
			<input id="AAA" name="additional[]" class="element checkbox" type="checkbox" value="AAA Member" />
			<label class="choice">AAA Member</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Boston College Graduate" />
			<label class="choice">Boston College Graduate</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Mulitple Vehicles" />
			<label class="choice">Mulitple Vehicles</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Hybrid Vehicle" />
			<label class="choice">Hybrid Vehicle</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Multiple Policy Credits" />
			<label class="choice">Multiple Policy Credits</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Good Student (B or Better Grades)" />
			<label class="choice">Good Student (B or Better Grades)</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Student Away From Home (100 miles+)" />
			<label class="choice">Student Away From Home (100 miles+)</label>
			
			<input name="additional[]" class="element checkbox" type="checkbox" value="Advanced Driver Training" />
			<label class="choice">Advanced Driver Training</label>
			
			
			
			
			
			<input name="additional[]"  type="checkbox"  value="Have Homeowner Insurance" onclick="this.form.home.style.display=(this.checked)?'inline':'none'" />
			
			<label class="choice">Have Homeowner Insurance</label>
			
			
			
	</span>
	</li>		
		
 
 
 
 
	<li>
		<label class="description">Homeowner Insurance Company (if applicable)</label>
		<div>
			<input name="homeowner" id="home" type="text" value="" style="display:none" />
		</div> 
	</li>	
 
 
 
 
 
 
 
	<li>Other Ways to Save</li>
<li>1) Be a good driver</li>
<li>2) Loyalty Credit (The longer you stay with a company the more you can save)</li>
<li>3) Shop Smart(Renew a week before expiration)</li>
<li>4) Multiple Policy Credit...... Place your home and auto with Dempsey	</li>
	
		
		
					<li class="buttons">
 
			    
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
		</li>
 
		
		
		
		</li>
			</ul>
		</form>	
 
 
	
	</div>
 
 
 
	</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Here is the checkbox code: 
 
 
			<input name="additional[]"  type="checkbox"  value="Have Homeowner Insurance" onclick="this.form.home.style.display=(this.checked)?'inline':'none'" />
			
			<label class="choice">Have Homeowner Insurance</label>
			
 
 
 
 
 
 
 
 
 
 
 
and Here is the text box and label that I want revealed when the checkbox is clicked: 
 
 
 
	<li>
		<label class="description">Homeowner Insurance Company (if applicable)</label>
		<div>
			<input name="homeowner" id="home" type="text" value="" style="display:none" />
		</div> 
	</li>

Open in new window

catonthecouchproductions

ASKER

oops the title of the question should be:

"Reveal Text box and Label in JavaScript"

ASKER CERTIFIED SOLUTION

sumitkchawla

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial