ngreenwood6 Posted October 4, 2008 Share Posted October 4, 2008 I am trying to set up some error handling with ajax so that it will be better for the user in the fact that they wont have to reload the page. I have 2 pages index.php: <?php include("includes/variables.php"); ?> <html> <head> <script type="text/javascript" src="includes/login.js"></script> <link href="includes/style.css" rel="stylesheet" type="text/css" /> <title><?php echo $sitename; ?></title> </head> <body> <center> <h1>Login Here!</h1> <form name="login_form"> <table id="login_table"> <tr> <td>Username</td> <td>:</td> <td><input name="username" type="text"></td> <td id="username_empty"></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input name="password" type="password"></td> <td id="password_empty"></td> </tr> <tr> <td></td> <td></td> <td><input type="button" name="submit_login" value="Log In" onclick="check_user(this.value);"></td> </tr> </table> </form> </center> </body> </html> login.js: //check that a username has been put into the form function check_user(username, password) { //get username from form var username = document.login_form.username.value; //get password from form var password = document.login_form.password.value; if(username == "") { //set the error for no username var no_username = "Please enter a username!"; //If nothing is set show the error document.getElementById("username_empty").innerHTML=no_username; } else if(username != "") { //if something is there remove the error document.getElementById("username_empty").innerHTML=null; } else if(password == "") { //set the error for no password var no_password = "Please enter a password!"; //if nothing is set for password show the error document.getElementById("password_empty").innerHTML=no_password; } else if(password != "") { //if something is set remove the error document.getElementById("password_empty").innerHTML=null; } Now I know some php but I am trying to incorporate the ajax just so that it does it on the fly instead of having to load a new page everytime. It is more for learning experience. Anyways, the problem is that it displays the username error but it is not displaying the password error. The other problem is that when viewing it in firefox it shows the username error when nothing is set and when something is set it goes away, but in internet explorer when something is set it displays the words null. Any help on any of these issues is appreciated. Quote Link to comment Share on other sites More sharing options...
fanfavorite Posted October 4, 2008 Share Posted October 4, 2008 First issue you need to have a separate if statement for password. It will never get to the 3rd else if. if(username == "") { //set the error for no username var no_username = "Please enter a username!"; //If nothing is set show the error document.getElementById("username_empty").innerHTML=no_username; } else { //if something is there remove the error document.getElementById("username_empty").innerHTML=null; } if(password == "") { //set the error for no password var no_password = "Please enter a password!"; //if nothing is set for password show the error document.getElementById("password_empty").innerHTML=no_password; } else { //if something is set remove the error document.getElementById("password_empty").innerHTML=null; } Quote Link to comment Share on other sites More sharing options...
fanfavorite Posted October 4, 2008 Share Posted October 4, 2008 Second error, try: document.getElementById("password_empty").innerHTML=""; Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 4, 2008 Author Share Posted October 4, 2008 Ok that is how I originally had it but my question now is what about telling it to do something after all the variables are true. For example I want it to check the username then the password (if either are wrong display error) then if all of them pass do this. If I do it the way that you have it I will have to create a whole new if and it will not go through the username and password the get to the last statement(if that makes any sense). That is why I did it with the else if's. Does anyone know how I could accomplish this? Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 4, 2008 Share Posted October 4, 2008 <script type="text/javascript"> var readyForm = true; if(username == ""){ var no_username = "..." readyForm = false; } if(password == ""){ var no_pass... readyForm = false; } ... if(readyForm){ //process form. } </script> If no errors occur, readyForm will remain true. Also, I would create an array for errors, and pass the errors to the array, and print them out if readyForm = false at the end. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 4, 2008 Author Share Posted October 4, 2008 Another reason is that after I check that the user enters a username and password I want to check in the database that the username exists. If it doesn't exist I want it to say username doesnt exist. Then if the username and password arent blank and the username is in the database, log the user in. If I do the commands separately like you said to. It will check each value independently. so I would have to create another if statement that logged the user in. The only problem is that because they are not together it checks those values and then it will still log the user in as long as the new statement that I create for the user to be logged in is true. I hope that makes sense to someone. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 4, 2008 Author Share Posted October 4, 2008 Thanks for the help xtopolist never thought about doing something like that. Sorry I am a noob and I have a couple of books I have been reading and they dont really show real world experiences lol. I will use what you have shown me. I am not very good at arrays at this point though. Could you give me an example of how you would create an array for the errors? Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 4, 2008 Share Posted October 4, 2008 <html> <head> <script type="text/javascript"> var errors = []; errors.push('No username'); errors.push('No password'); errors.push('No time'); errors.push('No money'); function showErrors(obj) { var x = document.getElementById(obj); var err = ''; for(i=0;i<errors.length;i++) { err += errors[i] + '<br />'; } x.innerHTML = err; } </script> </head> <body> <a onclick="showErrors('errDiv')">Click me to show errors</a><br /> <div id="errDiv"> </div> </body> </html> so in your code, if readyForm = false, you could call showErrors(). as for your "check if username and pw in database" thing, you'd have to write some ajax.. or look at other posts for an example. i cba to write any atm Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 4, 2008 Author Share Posted October 4, 2008 Thank you for the response. That is very helpful and I will have to try and implement that into my code. Again thank you for your help it is appreciated. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.