473,320 Members | 1,965 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Using the Enter Key to trigger a password button

I am very new to HTML and I am making a web page for my father. I am trying to make a password protected page and I got that working but it will only advance to the password protected page if they click the log in button after entering the password, it will not work if they click enter I was wondering how to make this possible. Also is there a way when the password is entered that it only comes up with circles not the actual password?

here is the code:

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. <!--- PASSWORD PROTECTION SCRIPT
  3.  
  4. function TheLogin() {
  5.  
  6. var password = '******'; 
  7. //this is where I place the password to use
  8.  
  9. if (this.document.login.pass.value == password) {
  10.   top.location.href="http://www.*******";
  11. }
  12. else {
  13.   location.href="http://www.*******";
  14.   }
  15. }
  16.  
  17. // End hiding --->
  18. </script>
  19.  
  20. </head>
  21. <body> 
  22. <div id="container"> 
  23. <div style="margin-left:0px;"> 
  24. <div style="margin-right:50px;">
  25. <center>
  26. Enter your password:<br>
  27. <form name="login" style="margin: 0px">
  28. <INPUT TYPE="text" NAME="pass" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br>
  29. <input type="button" value="Login" style="width : 150px; margin: 3px" onClick="TheLogin(this.form)">
  30. </form>
  31. </center>
  32.  
Please help if you have time
Dec 2 '10 #1
9 2825
Dormilich
8,658 Expert Mod 8TB
a) real password protection must be done serverside. anyone looking at your source code will see the password.

b) for the password field use <input type="password">
Dec 2 '10 #2
a) real password protection must be done serverside. anyone looking at your source code will see the password.

what do you mean by serverside ? How is this possible what would I have to edit ? Also is it very hard to make the enter key on the keyboard submit the password field ?

As I am very new to HTML all the google searches I am doing on this topic are hard to follow I do not know what to put where I did find this little bit of code though do i need to use something like this:
Expand|Select|Wrap|Line Numbers
  1.    1. <script>  
  2.    2.   
  3.    3.         function clickButton(e, buttonid){   
  4.    4.   
  5.    5.           var evt = e ? e : window.event;  
  6.    6.   
  7.    7.           var bt = document.getElementById(buttonid);  
  8.    8.   
  9.    9.           if (bt){   
  10.   10.   
  11.   11.               if (evt.keyCode == 13){   
  12.   12.   
  13.   13.                     bt.click();   
  14.   14.   
  15.   15.                     return false;   
  16.   16.   
  17.   17.               }   
  18.   18.   
  19.   19.           }   
  20.   20.   
  21.   21.         }  
  22.   22.   
  23.   23.     </script>  
  24.  
Dec 2 '10 #3
Dormilich
8,658 Expert Mod 8TB
what do you mean by serverside ?
on the webserver. there are different ways to do that.
- on an Apache webserver, you can create a .htaccess file that asks the client for verification (username & password)
- you can also use any serverside programming language to write a script that validates a given username and password and thus grants access to webpages.

usually hitting the enter key triggers the submit button to be "pressed", although you can use JavaScript to capture this event.
Dec 2 '10 #4
ok I will read up about the .htaccess files. Is the JavaScript code i posted above what I would use to "capture" that event ? I just do not know what to place where.
Dec 2 '10 #5
Dormilich
8,658 Expert Mod 8TB
Is the JavaScript code i posted above what I would use to "capture" that event ?
yes and no.

on the one hand side, checking for keycode 13 is what you need to do, on the other hand side, the function will not work due to the event not being registerd and the buttonid being undefined.
Dec 2 '10 #6
What would I have to do to change the code to be functional ?
Dec 2 '10 #7
Dormilich
8,658 Expert Mod 8TB
you know how event handling (in general) works?
Dec 2 '10 #8
I actually don't know how event handling works
Dec 2 '10 #9
Dormilich
8,658 Expert Mod 8TB
ok, before going back to your problem, I’ll talk a bit about Events, as this is necessary to understand the solution.

How does HTML code get into JavaScript?

the HTML source code is translated for JavaScript so that it can alter the HTML’s appearance. it is of utmost importance to understand this, otherwise the HTML/JavaScript interaction stays a mystery.
when the browser loads the HTML source code, it internally creates a representation of the code. thus each tag and each attribute and each text gets assigned a special object. the mechanism responsible for that is called DOM (Document Object Model). so what you have access to in JavaScript is not the HTML itself, but its object representation in the browser.

it is important to understand that an HTML attribute is not the same as the HTML attribute’s object equivalent in JavaScript.

rule of thumb: in JavaScript, everything is an object (and I mean everything).

What is an Event?

an event is some kind of action that occurs in the document, for example a click, a load, a mouse moving, all kinds of stuff. the events that are possible are standardised by the W3C in the DOM .

How does an Event work in JavaScript?

this is implemented in JavaScript through the use of the Event object, i.e. the user’s action (e.g. a click) is translated/modelled into a native JavaScript object (named "Event"). then this object travels through the document tree (resp. its objects that represent a HTML element) where it can trigger programmatic actions. these events are created automatically, you don’t have to do anything there.

How do I make an Event trigger something?

this is called Event Handling (making an event do something useful). the basic idea is that you wait for an event object to pass by. therefore you add a programming instruction to the object (the HTML element object) where the event passes through.

this can be done in several ways:
* inline javascript: only do that when there is no other possibility.

* DOM-0 Events: before there was a standard, browser vendors invented a way to handle events. this is done by using event properties (a property is part of an object, it is not the same as an HTML attribute). each HTML element object in JavaScript can be assigned an event property consisting of "on" + the event name (e.g. "click" => onclick). to this property a function variable must be passed. additionally, this function may only contain a single parameter that is the Event object.
Expand|Select|Wrap|Line Numbers
  1. function event_handler(evt)
  2. {
  3.     alert("this is a " + evt.type + " event");
  4. }
  5.  
  6. // div being a <div> element in JavaScript
  7. // note the missing parentheses
  8. div.onclick = event_handler;
according to the standard, when the click event reaches that <div> element, the function event_handler is executed with the click event object as parameter. additionally, the scope of the function changes. until now, the function belonged to the global scope, but now it is owned by the executing element object. this manifests in the system variable this, which changes from window to div (a very convenient way to access the current element!)

note: IE does not adhere to the standard. instead of passing an event through the document tree, it provides the event object as a global, only triggering the function to execute. (you already used the work-around for that)

* DOM-2: eventually, the W3C released a standard how Events should work. this brought along some very convenient features:
- you can assign multiple event handlers
- the event travels up and down in the document tree (bubbling and capturing)
- you can influence the event flow (canceling the event, preventing the default action an event would usually trigger).

Expand|Select|Wrap|Line Numbers
  1. function event_handler_1(evt)
  2. {
  3.     alert("I’m a " + this.tagName + " element");
  4.     // cancel the event
  5.     evt.stopPropagation();
  6. }
  7.  
  8. function event_handler_2(evt)
  9. {
  10.     alert("this is a " + evt.type + " event");
  11. }
  12. // catch event when it goes down in the document tree
  13. div.addEventListener("click", event_handler_1, true);
  14. // catch event when it goes up in the document tree
  15. // this is the same direction as in DOM-0
  16. div.addEventListener("click", event_handler_2, false);
  17.  
  18. /* you may guess what actions will happen … */
and now the bad news: IE doesn’t implement that at all. MS decided to go its own totally different way. there is also no easy work-around to make your code cross-browser compatible for the full set of features.
Dec 3 '10 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Antoni | last post by:
Hello, I wondered if anyone could further advice? In my script I was trying allow the user to enter a userid and password, and when the users clicks the login button. Pass these values passed to...
2
by: mohdowais | last post by:
Hi all, I am running an ASP 3.0 application on a Windows 2000 Advanced server. We've recently added new functionality to the application that allows users to click on a link, and view an attached...
5
by: Alan Zhong | last post by:
i am trying to similate an "ENTER" as a key to switch focus in a sequence of text inputs. i don't want to use "event.keyCode" since i want to do additional testing before i decide which text input...
1
by: Matt | last post by:
<input type="button" onClick="doSomething()"> When the user click HTML button, it will launch doSomething(). But I want the user enter ENTER key, it will have same effect. Please advise....
1
by: Empire City | last post by:
Enter network password appears when I open a VS Web application and again when I start it before the aspx page appears. IIS is installed on my C: drive but the above project/site is pointing the...
1
by: Laszlo Henning | last post by:
I would like to make it possible to jump from a field to another field (the next one in the tab index) using enter also and not only tab. How can this be done either without onkeydown or with it. ...
1
by: Ezra | last post by:
Our company's web server is trying to access graphics files on another server. When I run the app from Visual Studio (1.0) on my localhost, the server in question is available (which is accessed a...
3
by: David Lozzi | last post by:
Howdy, I'm using asp.net 2.0 and am trying to get one text box on the page, after the user presses enter, to "click" a specific button. I copied the javascript I used for a .net 1.1 web app I...
1
by: BisterBooster | last post by:
Hi, Can someone help me for next problem How to for using ENTER key to move to the right cell instead of the TAB key Many thanks in advance Marc.
1
by: Mahesh J K | last post by:
Hi, Pls help me in solving this problem. How to trigger radio button element's eventhandler from the mail body of the mail I am trying like this... strHTMLBody = "<html><head><script...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.