Javascript & Browser compatiblity?

[dirt29]

I'm builiding an online insurance application, where people input thier data, and it gives them rates, then lets them apply. I was wondering if someone could take a look and maybe tell me what the issue is?

Here is the url: http://67.62.217.33/test5

You will need to supply a valid zip, as it does a check for areas the insurance is available. You can use 23834

The issue I'm having is on the the next page there, intro-page2.asp, if you fill in your information or select add a child and then submit that, it takes you to the page with your quotes. No problem there. The problem is that if you use either the back button I have on the page or the browsers in IE, nothing is retained and the dropdowns disappear. But in FF, everything is fine.

Here is the JS I'm using to create the dropdowns:

function addEvent()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
//var num = (document.getElementById("theValue").value - 1)+ 2;
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = 
"<tr align=\"right\">"+
"<td width=\"66\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child&nbsp;&nbsp;&nbsp;</td>"+
"<td width=\"78\">"+
"<select name=\"child"+num+"_gender\" id=\"child"+num+"_gender\">"+
"<option value=\"\" selected>- -<\/option>"+
"<option value=\"Male\">Male<\/option>"+
"<option value=\"Female\">Female<\/option>"+
"<\/select>"+
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/td>"+
"<td width=\"169\">"+
"<input name=\"child"+num+"_dob_mm\" type=\"text\" id=\"child"+num+"_dob_mm\" style=\"width: 30px;\" />"+
"&nbsp;/ <input name=\"child"+num+"_dob_dd\" type=\"text\" id=\"child"+num+"_dob_dd\" style=\"width: 30px;\" />"+
"&nbsp;/ <input name=\"child"+num+"_dob_yyyy\" type=\"text\" id=\"child"+num+"_dob_yyyy\" style=\"width: 40px;\" />"+
"<\/td>"+
"<td width=\"59\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name=\"child"+num+"_tobacco\" type=\"checkbox\" id=\"child"+num+"_tobacco\" /></td>"+
"<td width=\"74\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name=\"child"+num+"_college\" type=\"checkbox\" id=\"child"+num+"_college\" /></td>"+
"<td width=\"69\" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name=\"child"+num+"_hippa\" type=\"checkbox\" id=\"child"+num+"_hippa\" /></td>"+
"<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove<\/a></td>"+
"<\/tr>";
ni.appendChild(newdiv);

}


function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

I also included the following snippet of ASP code to the top of my page:

<% Response.CacheControl = "no-cache" %>
<% Response.AddHeader "Pragma", "no-cache" %>
<% Response.Expires = -1 %>

The reason I added this was becasue in IE, when you page back the dropdowns disappear and if you try to re-add them and re-post the page, the values corresponding to the "Add Child" dropdown don't post. However in FF, everything works fine. So that little bit of ASP was the only way I could get the values to refresh & work.

I'm in desperate need of help to figure out the problem here, cause I've tried everything I can think of and I can't get it to work properly in IE.

Thanks in advance.

[acoder]

Elements added dynamically won't remain once you leave the page, so you need to add them again onload.