AJAX POST does not update DIV tag

[zactanaz]

Hello,

Am trying to use AJAX to post a form, then update the DIV that the form is located in. But it does not update the DIV, it should display a message like "Thanks for posting" inside the DIV tag. It does post the data. Am not good at JavaScript so any help would be appreciated.

This is the CODE:

var http_request = false;
function makePOSTRequest(url, parameters, id) {
	http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
    	http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
        }
	} 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('Cannot create XMLHTTP instance');
        return false;
   	}
      
    http_request.onreadystatechange = alertContents(id);
    http_request.open('POST', url, true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http_request.setRequestHeader("Content-length", parameters.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parameters);
}

function alertContents(id) {
	if (http_request.readyState == 4) {
    	if (http_request.status == 200) {
        //alert(http_request.responseText);
        	result = http_request.responseText;
            document.getElementById(id).innerHTML = result;            
        } else {
            alert('There was a problem with the request.');
        }
	}
}
   
function get(obj, id) {
	var poststr = "artist=" + encodeURI( document.getElementById("artist").value ) +
                  "&title=" + encodeURI( document.getElementById("title").value ) +
                  "&time=" + encodeURI( document.getElementById("time").value ) +
                  "&ytid=" + encodeURI( document.getElementById("ytid").value ) +
                  "&thumb=" + encodeURI( document.getElementById("thumb").value );
    makePOSTRequest('post.php', poststr, id);
}

And this is the HTML Form:

<div id="video_1">
	<form id="form_video_1" name="form_video_1" action="javascript:get(document.getElementById('form_video_1'), video_1);">
        Artist: <input id="artist" name="artist" type="text" size="20"><br>
    	Title: <input id="title" name="title" type="text" size="20"><br>
        <input id="time" name="time" type="hidden" value="123" />
        <input id="ytid" name="ytid" type="hidden" value="234124" />
        <input id="thumb" name="thumb" type="hidden" value="something" />
        <input name="submit" type="submit" value="Submit" onclick="javascript:get(this.parentNode);">
	</form>
</div>

I get the following error (in FireFox with FireBug):

video_1 is not defined
javascript:get(document.getElementById('form_video_1'), video_1);
Line 1

[A1ien51]

When you are doing this

http_request.onreadystatechange = alertContents(id);

you are telling alertContents to execute right than and there and store the result into onreadystatechange. What you need to do is store the function reference into it.

so you need to use a closure:

http_request.onreadystatechange = function(){alertContents(id);}

but since you are using a global variable for the xhr request, you can just use a global variable for the id.

Eric

[zactanaz]

That was it, thank you.