• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 466
  • Last Modified:

JavaScript Issue in IE

Hello.

I'm having difficulty with some Javascript in IE 7. The following code is supposed to create two new text boxes every time the button to do so is clicked. It works in FF, Safari, and Opera however I am having no success in IE7. Any idea what the problem might be?
<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>';
}
</script>
 
 
 
 
Further on in the document is this button which is clicked to create the new text boxes:
 
<input type="button" value="Add Driver" onclick="return add();" />
 
 
Even further on is this empty div tag which is where the text boxes will be created: 
 
<div id="test"></div>

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 3
  • 2
2 Solutions
 
Ionut A. TudorPHP ProgrammerCommented:
Just tested it works ok, Can you tell us exactly what problem you noticed on IE7 ?
0
 
catonthecouchproductionsAuthor Commented:
Yes. When I click the button it just doesn't do anything. The IE claims there is an unknown Run Time error  on line 4 of this particular code.
0
 
Ionut A. TudorPHP ProgrammerCommented:
There's probably an problem with your browser as i'm on IE7 testing and it works just fine by creating the two fields Name and Date of Birth
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
catonthecouchproductionsAuthor Commented:
OK well here is the full code of the page:
<!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 type="text/javascript" src="../../common/view.js"></script>
 
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  
<script>
  $(document).ready(function(){
    $("#autoquotenewpage").validate();
  });
  </script>
 
<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>
		</span> 
	</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>

Open in new window

0
 
Ionut A. TudorPHP ProgrammerCommented:
I could replicate the problem, don't know why but the li tag created that error, try now
function add(){
var html = document.getElementById('test').innerHTML;
document.getElementById('test').innerHTML=html+'<label class="description" for="name"><h3>Additional Driver</h3></label><label class="description" for="name">Name</label><div><input id="addName" name="driver[]" class="element text medium required"  type="text" value=""/></div><label class="description" for="addDOB">Date of Birth</label><div><input id="addDOB" name="driver[]" class="element text medium required"  type="text" value=""/></div><div id="test"></div>';
}
0
 
JohnSixkillerCommented:
Hi,

as al3cs12 mentioned above its somehow related to UL/LI elements. So you if you need it, enclose innerHTML string with <ul>...</ul>, and remove/close UL element from line 42.

Also remove <div id='test'></div> from innerHTML string. It's not good to mutiply DIVs with the same ID.

BTW.original code works on IE8
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now