HTMLweasel Posted March 23, 2006 Share Posted March 23, 2006 Hi allI am fairly new to javascript however I have experience in other programming languages.I am trying to make a simple login screen. When I click accept I want the values in the name and password field (textboxes) to be compared to a hard coded name and password in code (html file).I know it has something to do with onclick and then call a method to test my hard coded variables with what is in the text boxes.I am lost for syntax on retrieving data from textboxes on an event.Please any help would appreciated.Ryan Link to comment Share on other sites More sharing options...
Skemcin Posted March 23, 2006 Share Posted March 23, 2006 I first have to let you know that javascript is not an advisable way to authorize user access via username and password. Since javascript is a client site scripting language, all the source of the functions and everything you need to hack it is there - so a username and password validated/authorized solely through javascript is like leaving your door wide open when you leave on vacation and asking no one to go in. Link to comment Share on other sites More sharing options...
HTMLweasel Posted March 23, 2006 Author Share Posted March 23, 2006 Hi thanks for the suggestion - I fully agree. However I am not doing this out of pleasure:) I have a small assignment that requires it to be done in this manner (i.e. using hard coded usernames and passwords).I know of another way I could do it using prompt boxes. However I think this is kind of wrong. Please any help of getting data from text boxes on a click event and passing them into variables that I can manipulate or access would greatly be appreciated.Ryan Link to comment Share on other sites More sharing options...
Rachit Shah Posted March 23, 2006 Share Posted March 23, 2006 Hi Ryan, I first have to let you know that javascript is not an advisable way to authorize user access via username and password. Since javascript is a client site scripting language, all the source of the functions and everything you need to hack it is there - so a username and password validated/authorized solely through javascript is like leaving your door wide open when you leave on vacation and asking no one to go in.I think skemcin is right. But still if you want to use client side javascript, Find the code below. End-user never know such kind of validations, and he wont check source for the script, so this may work when the content of the pages is not sensitive.You can user same code on server side (Using ASP) and the source is secure. In the browser of the user, it wont show the script ( and hardcoded password, username)Use username = rachit and password = password1<html><head><meta http-equiv="Content-Language" content="en-us"></head><script type="text/javascript"><!--function ValidateAuthentication() { var UserName=document.getElementsByName('UserName').item(0).value; var Password=document.getElementsByName('Password').item(0).value; if(UserName == 'rachit' && Password == 'password1') { Â alert('Successfully Authenticated - Put the code for redirection here'); } else { Â alert('Failed to Authenticate - Put the code for error msg here'); }}//--></script> <body><form method="POST" action="--WEBBOT-SELF--"> <!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><table border="0" width="50%" id="table1" align=center> <tr> Â <td>User Name</td> Â <td><input type="text" name="UserName" size="20"></td> </tr> <tr> Â <td>Password</td> Â <td><input type="text" name="Password" size="20"></td> </tr></table> <p align="center"><input type="button" value="Submit" name="B1" onclick="ValidateAuthentication()"><input type="reset" value="Reset" name="B2"></p></form></body></html> Link to comment Share on other sites More sharing options...
HTMLweasel Posted March 23, 2006 Author Share Posted March 23, 2006 Thank you very much this is exactly what I needHowever I do not just want to copy paste:) HeheUserName=document.getElementsByName('UserName').item(0).value;I was wondering if you could explain what the .item(0).value; part means?I kind of understand that you are accessing the contents of the variable 'UserName', but I am unclear on what the second part is for.ThanksRyan Link to comment Share on other sites More sharing options...
scott100 Posted March 23, 2006 Share Posted March 23, 2006 I preffer to use id, like so: UserName=document.getElementById('UserName').value; <input type="text" id="UserName" size="20"> Link to comment Share on other sites More sharing options...
Rachit Shah Posted March 23, 2006 Share Posted March 23, 2006 I was wondering if you could explain what the .item(0).value; part means?I kind of understand that you are accessing the contents of the variable 'UserName', but I am unclear on what the second part is for.ThanksRyan<{POST_SNAPBACK}> You might have more than one elements with same name. Then by accessing document.getElementsByName() is actually an array of elements.Item(0) will represent first element with that name.Item(1) will represent second element with the same name.If there is only one element with that (unique) name, then surely you can use document.getElementsByName().value. I agree with scott. I believe using Id is a good practise.If there are more than one elements with same Id then I think SCOTT has to reconsider his statement!!! ( getElementsbyId().value wont work then). This is silly, but it deserves clarification.I have changed the code and put another input with same name ('UserName'). Still the code will work because of .item(0).value !!!<html><head><meta http-equiv="Content-Language" content="en-us"></head><script type="text/javascript"><!--function ValidateAuthentication() {var UserName=document.getElementsByName('UserName').item(0).value;var Password=document.getElementsByName('Password').item(0).value;if(UserName == 'rachit' && Password == 'password1'){ alert('Successfully Authenticated - Put the code for redirection here');}else{ alert('Failed to Authenticate - Put the code for error msg here');}}//--></script> <body><form method="POST" action="--WEBBOT-SELF--"><!--webbot bot="SaveResults" U-File="C:\Documents and Settings\161470\Desktop\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><table border="0" width="50%" id="table1" align=center><tr> <td>User Name</td> <td><input type="text" name="UserName" size="20"></td></tr><tr> <td>Password</td> <td><input type="text" name="Password" size="20"></td></tr></table><p align="center"><input type="button" value="Submit" name="B1" onclick="ValidateAuthentication()"><input type="reset" value="Reset" name="B2"></p></form><table border="0" width="50%" id="table2" align=center><tr> <td>Another input with same name</td> <td><input type="text" name="UserName" size="20"></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
scott100 Posted March 23, 2006 Share Posted March 23, 2006 If there are more than one elements with same Id then I think SCOTT has to reconsider his statement!!!I think you've missed the point with id's - no element on a web page should ever have the same id as another element.Quote from W3Schoolsid = A unique id for the elementAll id's must be uniquehttp://www.w3schools.com/xhtml/xhtml_standardattributes.asp Link to comment Share on other sites More sharing options...
Rachit Shah Posted March 23, 2006 Share Posted March 23, 2006 I am talking about html and not xhtml. http://www.w3schools.com/html/html_standardattributes.aspThanx scott for that. I had misunderstanding in this regard. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now