I can't seem to figure out how to use ajax to post. I made a silly form to try it out and even after having cut it all the way down to just two values, still can't get anything to work. My html is this:
<html>
<head>
<script type=text/javascript src=j.js></script>
<title>Test this<
<body>/title>
</head>
<form name=testForm onsubmit=postStuff() method=post>
First Name: <input type=text name=fname id=fname /><br />
Last Name: <input type=text name=lname id=lname /><br />
<input type=submit value=Submit Form />
</form>
<div id=status></div>
</body>
</html>
Then, my external javascript is just a single function so far:
function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = processForm.php;
var fn = document.getElementById(fname).value;
var ln = document.getElementById(lname).value;
var vars = firstname=+fn+&lastname=+ln;
hr.open(POST, url, true);
hr.setRequestHeader(Content-type, application/x-www-form-urlencoded);
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById(status).innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById(status).innerHTML = processing...;
}
While my php just echoes the stuff back:
<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
echo $firstname . - . $lastname .<br />;
?>
I can't find anything wrong in firebug or in chrome's toolsy thingies..
Can anybody who me what I'm doing wrong?