innerHTML problem

[r-it]

I am currently having a problem with innerHTML, the thing is i am retrieving a form using ajax right, the thing is that when i get the responseText back and i make an alert before i use the innerHTML, and i can see the form and table values there, but then it has a runtime error in ie, and i have traced it to the innerHTML. I have the form tag as the first thing, and then the table tag, the thing is, it shows when i ommit the <form> tag, as in it puts the text into the div, but i get a runtime error when i put the form tag there, its working 100% in firefox, just bloody microsoft ie that's giving me problems.

 

Here is my javascript(it's a bit messed up because i was trying a lot of different things)

function getxmlhttp()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
	// assume IE6 or older
	var XmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0',
									'MSXML2.XMLHTTP.5.0',
									'MSXML2.XMLHTTP.4.0',
									'MSXML2.XMLHTTP.3.0',
									'MSXML2.XMLHTTP',
									'Microsoft.XMLHTTP');
	// try every prog id until one works
	for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
	{
		try

		{
			// try to create XMLHttpRequest object
			xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
		}
		catch (e) {}
	}
}
// return the created object or display an error message
if (!xmlHttp)
{
	alert("Error creating the XMLHttpRequest object.");
}
else
{
	return xmlHttp;
}
}
function handleDivTag(divtag)
{
var divtag;
return divtag;
}
function getvalues(z)
{
var str = "";

for(var i = 0; i < z.elements.length; i++)
{
	str += z.elements[i].name + "=" + escape(z.elements[i].value) + "&";
}
return str;
}
var divhandler = new handleDivTag(null);
var divhandler3 = new handleDivTag(null);

xmlhttp = getxmlhttp();

function handleResponse() 
{ 
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
   { 
   
// Text returned FROM the PHP script 
   	var response = xmlhttp.responseText; 

    	if(response) 
	{ 
    	 	//alert(response);
		// UPDATE ajaxTest content 
    		 document.getElementById(divhandler.divtag).innerHTML = response; 
		// alert(divhandler.divtag);
		 xmlhttp.abort();
	} 
} 

}
function handleResponse3() 
{ 
   if(xmlhttp3.readyState == 4 && xmlhttp3.status == 200)
   { 
   
// Text returned FROM the PHP script 
   	var response3 = xmlhttp3.responseText; 
var it = "text";

    	if(response3) 
	{ 
    	 	// UPDATE ajaxTest content 
    		 document.getElementById(it).innerHTML = response3; 
		 alert(divhandler3.divtag);
		 //xmlhttp.abort();
	} 
} 

}

function processajax(obj, serverPage, getOrPost, str)
{
//get an xmlhttprequest object for use

//objID = document.getElementById(obj);
//alert("in process ajax");
var ob = obj;



//var response;



var servus = serverPage;




if(getOrPost == "get")
{

	xmlhttp.open("GET", serverPage, false);
	//alert("after get");
	/*xmlhttp.onreadystatechange = function() {
		//alert("alert for statechange " + xmlhttp.readyState + "using this object: " + obj);
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		response = xmlhttp.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler.divtag).innerHTML = response;
				alert(response);
			}
		}
	}*/


	divhandler.divtag = ob;
	//alert("after divhandler");
	xmlhttp.onreadystatechange = handleResponse;
	//alert("after statechange");
	xmlhttp.send(null);
	//alert("after send null");

	//setTimeout(handleResponse
	//xmlhttp.abort();




}
else
{
	alert("in the process");
	xmlhttp.open("POST", serverPage, false);
	/*xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

	xmlhttp.onreadystatechange = function() {
	if(xmlhttp.readyState == 4) {
		response = xmlhttp.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler.divtag).innerHTML = response;
				alert(response);
			}
		}
	}*/
	xmlhttp.onreadystatechange = handleResponse;
	alert(response);
	divhandler.divtag = obj;
	xmlhttp.send(str);
}
}
function processajax1(obj1, serverPage1, getOrPost1, str1)
{
//get an xmlhttprequest object for use
xmlhttp1 = getxmlhttp();
//objID1 = document.getElementById(obj1);

var ob = obj1;

var divhandler1 = new handleDivTag(null);

var response;

divhandler1.divtag = ob;

if(getOrPost1 == "get")
{

	xmlhttp1.open("GET", serverPage1);
	xmlhttp1.onreadystatechange = function() {
		//alert("alert for statechange " + xmlhttp1.readyState + "using this object: " + obj);
	if(xmlhttp1.readyState == 4 && xmlhttp1.status == 200) {
		response = xmlhttp1.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler1.divtag).innerHTML = response;
			}
		}
	}

	xmlhttp1.send(null);

//xmlhttp.send(null);
}
else
{
	xmlhttp1.open("POST", serverPage1, true);
	xmlhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp1.onreadystatechange = function() {
	if(xmlhttp1.readyState == 4 && xmlhttp1.status == 200) {
		response = xmlhttp1.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler1.divtag).innerHTML = response;
			}
		}
	}
	xmlhttp1.send(str1);
}
}
function processajax2(obj2, serverPage2, getOrPost2, str2)
{
//get an xmlhttprequest object for use
xmlhttp2 = getxmlhttp();
//objID2 = document.getElementById(obj2);
var ob = obj2;

var divhandler2 = new handleDivTag(null);

var response;

divhandler2.divtag = ob;

if(getOrPost2 == "get")
{

	xmlhttp2.open("GET", serverPage2);
	xmlhttp2.onreadystatechange = function() {
		//alert("alert for second statechange " + xmlhttp2.readyState + "using this object: " + obj2);
	if(xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
		response = xmlhttp2.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler2.divtag).innerHTML = response;
			}
		}
	}

	xmlhttp2.send(null);

//xmlhttp.send(null);
}
else
{
	xmlhttp2.open("POST", serverPage2, true);
	xmlhttp2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp2.onreadystatechange = function() {
	if(xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
		response = xmlhttp.responseText;
			if(response)
			{
				//update ajax content
				document.getElementById(divhandler.divtag).innerHTML = response;
			}
		}
	}
	xmlhttp2.send(str2);
}
}
function processajax3(obj3, serverPage3, getOrPost3, str3)
{
//get an xmlhttprequest object for use
xmlhttp3 = getxmlhttp();
//objID2 = document.getElementById(obj2);
var ob3 = obj3;

var divhandler3 = new handleDivTag(null);

var response3;

divhandler3.divtag = ob3;

if(getOrPost3 == "get")
{

	xmlhttp3.open("GET", serverPage3, false);
	//xmlhttp3.onreadystatechange = function() {
		//alert("alert for second statechange " + xmlhttp2.readyState + "using this object: " + obj2);
	//if(xmlhttp3.readyState == 4 && xmlhttp3.status == 200) {
		//response3 = xmlhttp3.responseText;
			//if(response3)
			//{
				//update ajax content
				//document.getElementById(divhandler3.divtag).innerHTML = response3;
			//}
		//}
	//}

	xmlhttp3.onreadystatechange = handleResponse3;

	xmlhttp3.send(null);

//xmlhttp.send(null);
}
else
{
	xmlhttp3.open("POST", serverPage3, true);
	xmlhttp3.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp3.onreadystatechange = function() {
	if(xmlhttp3.readyState == 4 && xmlhttp3.status == 200) {
		response3 = xmlhttp3.responseText;
			if(response3)
			{
				//update ajax content
				document.getElementById(divhandler3.divtag).innerHTML = response3;
			}
		}
	}
	xmlhttp3.send(str3);
}
}
function loading()
{
var serv1 = "process.php?id=1";
var serv2 = "getform.php?id=1";

var obj1 = "text";
var obj2 = "top";
//alert("in loading");
processajax1(obj1, serv1, "get", "");
processajax2(obj2, serv2, "get", "");
}
function getPage(objct, id)
{
var servPage = "process.php?id=" + id;

processajax(objct, servPage, "get", "");
}
function dologin(f)
{
var username = f.txLogin.value;
var pass = f.txPass.value;
var obj = "top";
var str = getvalues(f);

var serv = "check.php?logn=" + username + "&pass=" + pass;
//alert(str);

processajax(obj, serv, "get", "");
//setTimeout("processajax(objID, servus, getOrPost, str)", 1000);
}
function tryagain()
{
var serv = "getform.php?id=1";
var obj = "top";
processajax2(obj, serv, "get", "");
//alert("in tryagain");
}
function logout()
{
var url = "check.php?logn=out";
var val = "top";

processajax(val, url, "get", "");
}
function searchin(val)
{
spage = "search.php?value=" + val;
objid = "text";

processajax(objid, spage, "get", "");
document.getElementById('txQuery').value = "";

}
function getsubform()
{
var url = "get.php?theid=1";
var val = "text";


processajax(val, url, "get", "");
}
function forgot()
{
var url = "getform.php?id=2";
var val = "top";

processajax(val, url, "get", "");
}
function back2login()
{
var url = "getform.php?id=1";
var val = "top";

processajax(val, url, "get", "");
}
function back2login2()
{
var url = "getform.php?id=1";
var val = "fak";

processajax(val, url, "get", "");
}

please help anyone i'm desperate, and i had to make my page synchronous because it kept refreshing the whole page

[mainewoods]

ie can give you problems when you try to inject complicated items into something using innerHTML.  I have had a number of problems in that area and have not even tried injecting a whole form.  Make sure the form you inject is well formed and is well formed also in the context in which it will be injected, namely the code surrounding the div it will be injected into.

 

I have seen a lot of problems on these boards with people trying to innerHTML form elements into something and getting bad results.  I would say injecting form fields using innerHTML is too problematic and a standards based approach using document.createElement is the only way to go for creating new form fields on the fly.