Link to home
Start Free TrialLog in
Avatar of gingera
gingera

asked on

"Unknown Runtime Error" on MS IE due to document.getElementById().innerHTML

JAVASCRIPT


Hello,

I am a complete idiot on Javascript.

Could a Javascript expert look at the Javascript below? What is wrong with it?

It works on Firefox, but threw a UNKNOWN RUNTIME ERROR on Microsoft Internet Explorer 7. What must I change in the Javascript to make it work on Firefox and MS IE?

Many thanks in advance.


This question is related to
https://www.experts-exchange.com/questions/23207634/How-to-insert-multiple-customer-records-via-a-PHP-form.html
<script language="javascript">
function addAnother()
{
var html = document.getElementById('customer_data_field_set').innerHTML;
document.getElementById('customer_data_field_set').innerHTML = html + '<form method="POST" name="customer_data_entry" action="add_customer_record.php"><table width="550" border="0" cellspacing="2" cellpadding="3"><tr><td colspan="2" bgcolor="#000000"><font color="white">Customer Information</font></td></tr><tr><td bgcolor="#FFCC66">Customer No. </td><td bgcolor="#CCCCCC"><input name="customer_no[]" type="text" id="customer_no[]"></td></tr><tr><td width="159" bgcolor="#FFCC66">First Name </td><td width="373" bgcolor="#CCCCCC"><input name="first_name[]" type="text" id="first_name[]"></td></tr><tr><td bgcolor="#FFCC66">Last Name </td><td bgcolor="#CCCCCC"><input name="last_name[]" type="text" id="last_name[]"></td></tr><tr><td bgcolor="#FFCC66">Sex</td><td bgcolor="#CCCCCC"><select name="sex[]" id="sex[]"><option value="Male">Male</option><option value="Female">Female</option></select></td></tr><tr><td bgcolor="#FFCC66">Address Line 1 </td><td bgcolor="#CCCCCC"><input name="address_line_1[]" type="text" id="address_line_1[]"></td></tr><tr><td bgcolor="#FFCC66">Address Line 2 </td><td bgcolor="#CCCCCC"><input name="address_line_2[]" type="text" id="address_line_2[]"></td></tr><tr><td bgcolor="#FFCC66">City</td><td bgcolor="#CCCCCC"><input name="city[]" type="text" id="city[]"></td></tr><tr><td bgcolor="#FFCC66">State</td><td bgcolor="#CCCCCC"><input name="state[]" type="text" id="state[]"></td></tr><tr><td bgcolor="#FFCC66">Post Code</td><td bgcolor="#CCCCCC"><input name="post_code[]" type="text" id="post_code[]"></td></tr><tr><td bgcolor="#FFCC66">Country</td><td bgcolor="#CCCCCC"><input name="country[]" type="text" id="country[]"></td></tr><tr><td>&nbsp;</td><td><input type="submit" value="Submit to database" /> OR <input type="button" value="Add Another Record" onclick="return addAnother();" /></td></tr></table><div id="customer_data_field_set"></div></form><p/>';
}
</script>

Open in new window

Avatar of hielo
hielo
Flag of Wallis and Futuna image

This problem is ocurring because everytime you call addAnother, it puts this in your document
<div id="customer_data_field_set"></div>

So, if You were to call addAnother 2 times, you would have two elements with the same id =>customer_data_field_set
So, what's the problem? This=> document.getElementById("customer_data_field_set") requires a unique ID. meaning, there can only be one element at any time with the id set to customer_data_field_set.

Not sure what you are doing there, but you need to rethink your strategy.
ASKER CERTIFIED SOLUTION
Avatar of Loganathan Natarajan
Loganathan Natarajan
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of gingera
gingera

ASKER

logudotcom, you solved it!

For the record....



logudotcom:

The problem is, FORM & DIV are again repeated in the javascript ...

form should be one always .. just look at the code


<script language="javascript">
function addAnother()
{
 
var html = document.getElementById('customer_data_field_set').innerHTML;
 
document.getElementById('customer_data_field_set').innerHTML=html+'<table width="550" border="0" cellspacing="2" cellpadding="3"><tr><td colspan="2" bgcolor="#000000"><font color="white">Customer Information</font></td></tr><tr><td bgcolor="#FFCC66">Customer No. </td><td bgcolor="#CCCCCC"><input name="customer_no[]" type="text" id="customer_no[]"></td></tr><tr><td width="159" bgcolor="#FFCC66">First Name </td><td width="373" bgcolor="#CCCCCC"><input name="first_name[]" type="text" id="first_name[]"></td></tr><tr><td bgcolor="#FFCC66">Last Name </td><td bgcolor="#CCCCCC"><input name="last_name[]" type="text" id="last_name[]"></td></tr><tr><td bgcolor="#FFCC66">Sex</td><td bgcolor="#CCCCCC"><select name="sex[]" id="sex[]"><option value="Male">Male</option><option value="Female">Female</option></select></td></tr><tr><td bgcolor="#FFCC66">Address Line 1 </td><td bgcolor="#CCCCCC"><input name="address_line_1[]" type="text" id="address_line_1[]"></td></tr><tr><td bgcolor="#FFCC66">Address Line 2 </td><td bgcolor="#CCCCCC"><input name="address_line_2[]" type="text" id="address_line_2[]"></td></tr><tr><td bgcolor="#FFCC66">City</td><td bgcolor="#CCCCCC"><input name="city[]" type="text" id="city[]"></td></tr><tr><td bgcolor="#FFCC66">State</td><td bgcolor="#CCCCCC"><input name="state[]" type="text" id="state[]"></td></tr><tr><td bgcolor="#FFCC66">Post Code</td><td bgcolor="#CCCCCC"><input name="post_code[]" type="text" id="post_code[]"></td></tr><tr><td bgcolor="#FFCC66">Country</td><td bgcolor="#CCCCCC"><input name="country[]" type="text" id="country[]"></td></tr><tr><td>&nbsp;</td><td><input type="submit" value="Submit to database" /> OR <input type="button" value="Add Another Record" onclick="return addAnother();" /></td></tr></table><p/>';
}
</script>

Open in new window

Avatar of gingera

ASKER

A completely tested and accuate set of codes is always very much appreciated!