is this your entire page code?
Have you checked the jscript load order ?
please take a look at this---> fiddle (this has a 3 sec response delay )
<h2>AJAX async demo</h2>
<button type="button" onclick="callAjax()">Request data</button>
<div id="testDiv"></div>
<script>
function callAjax() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", "/echo/html/", true);
var params = "html=test&delay=3"
xmlhttp.send(params);
}
</script>
The submit button will immediately submit the form it is in, and the browser will leave the page (and the JavaScript execution environment from which the Ajax request is being made).
Cancel the default behaviour of the form submission when you want to use JavaScript instead.
onclick="sbt(); return false;"
(I'd look at using a modern approach to event binding instead of onclick
attributes though).