ajax form issue IE

I have the following code that works in every browser but IE. When click on the submit button of the form I get no response at all from IE.

form has this value: onsubmit="sendform(this);return false;"

<script type="text/javascript">
    function makeRequest(url) {
        var http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = function() {

            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    alert(http_request.status);
                    //alert(http_request.responseText);
                    toggleDiv('stylized');
                    showtoggleDiv('success');
                } else {
                    alert('There was a problem with the request.');
                }
            }
        };
        http_request.open('GET', url, true);
        http_request.send(null);
    }

    function sendform(el) {
        var sub = el.getElementsByTagName('input');
        query = new Array();
        for (i in su开发者_开发技巧b) {
            if (sub[i].name) {
                query.push(sub[i].name + '=' + sub[i].value);
            }
        }
        query = '?' + query.join('&');

        makeRequest("http://markburnettinternational.com/sitelokpw/members/test.php" + query);
    }
</script>
<script language="javascript">
    function toggleDiv(divid) {
        if (document.getElementById(divid).style.display == 'none') {
            document.getElementById(divid).style.display = 'block';
        } else {
            document.getElementById(divid).style.display = 'none';
        }
    }
</script>
<script>
    function showtoggleDiv(divid) {

        document.getElementById(divid).style.display = 'block';

    }
</script>

---

Turn on the browser's debugger and put a breakpoint in sendform() and walk through it and see what happens. Alternately turning on the javascript console can give you vital feedback about what's going on.

---

There are at least three problems with this piece of code:

var sub = el.getElementsByTagName('input');
query = new Array();
for (i in sub) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + sub[i].value);
    }
}

First, always declare your variables within the local scope using var, so use

var query = new Array();
for (var i in sub) {

Second, getElementsByTagName returns a NodeList, which is an array-like object. Never iterate over array(-like object)s using a for … in loop, always use an ordinary for loop.

Third, always use encodeURIComponent to properly encode query parameters:

for (var i = 0, len = sub.length; i < len; i++) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + encodeURIComponent(sub[i].value));
    }
}

This might solve your IE issue.