just started on ajax and stuck! Please help

chetan1989 · July 31, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Web Page Maker">
    <script language="javascript" type="text/javascript">
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
	request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
	try {
		request = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (failed) {
		request = null;
	}
}
}
if(request == null )
alert("Error creating object !");
function getResponse() {
	var URL = "login.php";
                var username = document.getElementById("username");
                var password = document.getElementById("password");
	request.open("POST",URL,true);
                request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	request.send("username="+username+"&password="+password);
                request.onreadystatechange = updatePage;
}
function updatePage() {
if(request.readyState == 4) {
            if(request.status == 200) {
                var response = request.responseText;
                var mainDiv = document.getElementById("main");
                for(var i =0;i<mainDiv.childNodes.length;i++) {
                    var childnode = mainDiv.childNodes[i];
                    mainDiv.removeChild(childnode);
                }
                var aNode = document.createElement("a");
                aNode.setAttribute("href","frameset.html")
                var textNode = document.createTextNode("Click here to begin");
                aNode.appendChild(textNode);
                mainDiv.appendChild(aNode);
        }
    }
}
    </script>
</head>

<body>
<div id="main">
  <form>
    <table>
      <tr>
        <td>Username:</td>
        <td><input type="text" name="Username" value="" /></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" name="Password" value="" /></td>
      </tr>
      <tr>
        <td><input type="button" value="Submit" onClick="getResponse();" /></td>
        <td><input type="reset" value="Reset" /></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

What I wanted to do is when the user clicks submit the form disappers and in place of it the link (frameset.html) with text Click here to begin comes. But what I am getting is that when I click submit I get Click here to begin below the form and then when I click again on submit I get another Click here to begin and now form disappears. Can anyone explain to me where am I going wrong?

Sign In

just started on ajax and stuck! Please help

Recommended Posts

chetan1989

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information