[SOLVED] Form only submitting 1 time

[Philip]

Hey guys,

 

I'm not too lucky when it comes to JS & AJAX scripting. When I'm lucky, it lets me do basic stuff. I know there has to be a simple solution, like one line of code that I'm missing.

 

Goal:

Login with AJAX form

 

Problem:

Once the form is submitted once, you can't submit it again. Let's say that you entered in a typo for your password, and you were rejected to be logged in, then you would want to enter in your info again. Well, for my form, once it submits once, you can't submit again.

 

http://www.bookmarkmania.com/ajax/test/login.html

User: philip

Pass: test

 

To login with the info above, its on an onblur cue, so just tab off the password box.

 

And for those who say its a security threat, I have a script for md5'ing it before it gets submitted to the server, so its more secure.

 

AJAX script:

function createRequest() {
  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 request object!");
  } else {
    return request;
  }
}

var request = createRequest();

 

JS Script:

function sendRequest(request, url) {
  request.onreadystatechange = finishLogin;
  request.open("GET", url, true);
  request.send(null);
}

function checkLogin() {
  var username = document.getElementById("username").value;
  var password = hex_md5(document.getElementById("password").value);
  var loginstatus = 
   document.getElementById("login-status");
  var status = getText(loginstatus);
  if (status == "Please Login Above") {
    replaceText(loginstatus, "Logging " + username + " in.");
    var url = "php/login.php?username=" + username + "&password=" + password;
	document.forms[0].reset();
    sendRequest(request, url);
  }
}

function finishLogin() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var response = request.responseText;
      var loginfail = response.substring(0, 1);
      var name = response.substring(1, response.length);
      if(loginfail == '0') {
  			var loginstatus = 
          document.getElementById("login-status");
          replaceText(loginstatus, "Login Successful! Welcome back " + name);
        window.redirect='main.php';
		}
    } 
	if (request.status != 200) {
		var loginstatus = document.getElementByID("login-status");
		replaceText(loginstatus, "Request Status isn't working");
	} 
	if(loginfail == '1') {
  		var loginstatus = 
        document.getElementById("login-status");
        replaceText(loginstatus, "Login Failed (Wrong Info) " + name);
		request = createRequest();
	}
}
}

 

Thanks guys!

[lococobra]

Well, I wasn't going to post because I thought my suggestion would violate all kinds of standards, turns out it doesn't (See Here for proof)

 

I think if you get rid of your <form> it will solve most of your problems. When doing ajax, you often need form elements to be dynamic. However, when using a form this is not the case... after the form has been submitted, it kind of locks up.

 

Seems like you know what you're doing so I won't go into too much detail, just get rid of the form and use something like this to check the entered values...

 

<input type="button" onClick="checkLogin();" />

 

Try that and I'll try to remember to check back here to see if that fixed it.

[Philip]

Still didn't work. Driving me crazy =P

[lococobra]

Honestly, I'm not sure what's causing the problems... perhaps you should change the declaration of var request from being global to local per request that's actually sent. Seems to me like that could potentially fix it.

[Philip]

If I take it out of global, it sits at "Logging <i>name</i> in"

 

Wait, it kinda works now. You have to hit the submit button, it will show up with "logging xxnamexx in" and then if you click it again, it will show if it worked or not.

[lococobra]

Hmm, I just looked back on some of my old ajax, and it appears keeping the var request global was the correct thing to do... what did you change since the previous version?

[Philip]

YEah, I got it to work now.

 

 

I actually didn't change much, in the loginCheck function I changed a few things to this:

function checkLogin() {
  var username = document.getElementById("username").value;
  var password = hex_md5(document.getElementById("password").value);
  var loginstatus = 
   document.getElementById("login-status");
  var status = getText(loginstatus);
//Commented out = changed
//if(loginstatus == 'Please Login Above') {
    replaceText(loginstatus, "Logging " + username + " in.");
    var url = "php/login.php?username=" + username + "&password=" + password;
	//document.forms[0].reset();
    sendRequest(request, url);
// }
}