Ajax form submission, not working in IE

I have this web page where I have a menu bar at the top and underneath the menu bar I have a div element with id="MainContentInner" - When a menu item is clicked on I call Ajax script to replace the contents of MainContentInner by doing something like the following

MainContentInner.innerHTML = response text

Lot of times, the response text is an HTML form. The forms are displayed fine every time menu items are clicked on. But when the submit button is pressed, it works in Firefox, but not in IE. When the javascript is called, in IE the form.element.length returns 0 (it is fine in Firefox)

If the form is part of the the page when the page was first displayed, it works fine in IE. What does not work is when a form is brought in to the page with an innerHTML assignment. This does not work with IE.

I am not too familiar with Javascript or AJAX. I have used sample code that I found on the web. I have given the javascript code as well as a sample response text. I would appreciate your help.



function getMultipleSelection(mSelect){
var delim = "";
var selParams = "";
for(j = 0; j < mSelect.options.length; j++) {
if(mSelect.options[j].selected) {
selParams += delim + mSelect.options[j].value;
delim = ":";
}
}
return selParams;
}

function create_request_string(theform) {

var reqStr = "";

for(i=0; i < theform.elements.length; i++) {

isformObject = false;

switch (theform.elements[i].tagName) {

case "INPUT":

switch (theform.elements[i].type) {

case "FILE":
case "text":
case "password":
case "hidden":
reqStr += theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
isformObject = true;
break;

case "checkbox":
if (theform.elements[i].checked) {
reqStr += theform.elements[i].name + "=" + theform.elements[i].value;
}
else {
reqStr += theform.elements[i].name + "=";
}
isformObject = true;
break;

case "radio":
if (theform.elements[i].checked) {
reqStr += theform.elements[i].name + "=" + theform.elements[i].value;
isformObject = true;
}
}
break;

case "TEXTAREA":
reqStr += theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
isformObject = true;
break;

case "SELECT":
var sel = theform.elements[i];
if (sel.multiple) {
var mSelOptions = getMultipleSelection (sel);
reqStr += sel.name + "=" + mSelOptions;
}
else {
reqStr += sel.name + "=" + sel.options[sel.selectedIndex].value;
}
isformObject = true;
break;
}

if ((isformObject) && ((i+1)!= theform.elements.length)) {
reqStr += "&";
}
}
return reqStr;
}


//Browser Support Code
function populateMainContent (method, form, url, params){

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

document.getElementById('MainContentInner').innerHTML = "<div style=\"font-size: 14px;font-weight:bold;margin-top:80px;\"><img src=\"images/loading.gif\"></div>";

ajaxRequest.open(method, url, true);

if (method == 'POST') {

var reqStr = create_request_string(form);

ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


ajaxRequest.setRequestHeader("Content-length", reqStr.length);
ajaxRequest.setRequestHeader("Connection", "close");

ajaxRequest.onreadystatechange = function() {//Call a function when the state changes.
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
document.getElementById('MainContentInner').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.send(reqStr);
}
else {
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('MainContentInner').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
return true;
}

Sample Response text

<form name="AlbumDelete" method="POST" onsubmit="populateMainContent('POST', this, 'http://www.xx.com/cgi-bin/deleteAlbum.pl', ''); return false;">
<input type="hidden" name="AdID" value="1234">
<div style="text-align:left;width:500px;font-weight: bold;margin-bottom: 10px;">Delete Photos from Album</b></div>
<div style="text-align:left;width:500px;margin-bottom: 10px;">
Select the Photos you want to delete and press Submit
</div>
<div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
<img src="http://www.xx.com/img.jpg">
<input type=checkbox name=1>&nbsp;Delete This Photo?
</div>
<div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
<img src="http://www.xx.com/img.jpg">
<input type=checkbox name=2>&nbsp;Delete This Photo?
</div>
<div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
<img src="http://www.xx.com/img.jpg">
<input type=checkbox name=3>&nbsp;Delete This Photo?
</div>
<div style="text-align:left;width:500px;">
<input type="submit" name="Submit" value="Submit">
</div>
</form>

What does not work is when a form is brought in to the page with an innerHTML assignment. This does not work with IE.
innerHTML is not a standard DOM method, it will not really insert all the elements nor their attributes into the DOM tree. I would say that you should use DOM methods to create and append the elements (createElement(), setAttribute() appendChild()...and so on). And take care about the differences between IE and other browsers.

I am not too familiar with Javascript or AJAX

Try to.

Here is the situation though. Everywhere I read (including the Javascript/AJAX books from O'Reilley), there is a debate on whether to use innerHTML or not. And then they go on to use innerHTML instead of the DOM methods everywhere. They do not recommend not using it. Granted, innerHTML is not standand, but it is used in far too many places.

When you have a very large form, the DOM method would be very involved compared to the one liner with innerHTML. The irony is innerHTML is Microsoft proprietory and it does NOT work in IE.

Unfortunately, right now, I do not have the time to tinker with DOM methods. I ended up removing ajax from the forms and I made the forms simple popups. For my purpose that works just as good.

If you are a newbie like me, you will learn the hard way that ajax is not always an easy solution. If you have the time, read up and design carefully.

As I said: innerHTML is not a standard DOM method, even if it is crossbrowser and really helpful. Even the Microsoft team recognize some of its limits:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

By short: if you intend only to display some elements, innerHTML will do the job. But, if later you want to handle the new inserted elements on using DOM reference methods, some problems, sometimes but not always, might occur, depending on the browser. The only thing you may do is to test, as a first choice, the innerHTML, and check if what you need works. If not, it is time to use the more elaborate but more safer DOM methods. That means also to organize the server-side response data in a JSON (http://json.org) manner (or XML).

Thanks for the insight.

I am using ajax for display currently. I will go back and revisit the issues when I have some time.