www.webdeveloper.com
Results 1 to 5 of 5

Thread: "onSubmit" respond to Enter key?

  1. #1
    Join Date
    Nov 2007
    Posts
    21

    "onSubmit" respond to Enter key?

    Hi everyone. I am posting here because I found a different thread with almost this same question but I am not familiar enough with reading html/scripts to figure out how to apply this to my situation. The mentioned post is here: http://www.webdeveloper.com/forum/sh...hreadid=164658

    I am using the "Encrypted Password script" from http://www.dynamicdrive.com/dynamicindex9/password.htm but I have altered the code so the user needs no "username" (I hid it). It is now as follows:
    Code:
    <div id="text-input">
       		        <form name="password1">
       		          <input name="username2" type="text" value="username" size="15" style="display: none;" />
       		          <br />
       		          <strong>Please enter the couple's last name: </strong>
    
       		          <input type="text" name="password2" size="15" />
       		          
       		          <input type="button" value="Submit" onClick="submitentry()" />
                    </form>
            </div>
    I would like to enable the user to be able to type the password and then hit the Enter key to submit rather than forcing them to mouse-click the button.

    Any ideas?

    Thanks

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Hitting the enter key while one of the form fields is selected (except <textarea>) will submit the form.

    Edit: Ah, I see the problem. Not the best way to have users login.

    Nevertheless, this should do the trick:
    Code:
    function submitentry(f){
    
      var password	= f.password.value.toLowerCase();
    
      var passcode	= 1;
    
      for(i = 0; i < password.length; i++) {
        passcode	*= password.charCodeAt(i);
      }
    
      if( passcode == 126906300 ){
        f.action	= password+".htm";
        return true;
      }else{
        alert("Incorrect password.");
        return false;
      }
    
    }
    
    <form action="#" method="post" onsubmit="return submitentry(this);">
    
      <p>
        <label>
          Please enter the couple's last name:<br>
          <input type="text" name="password" size="15">
        </label>
      </p>
    
      <p>   		          
        <input type="submit" value="Submit">
      </p>
    
    </form>
    This code is untested but should work.

    Edit 2: Just tested it, works fine.
    Last edited by David Harrison; 11-03-2007 at 01:09 PM.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Nov 2007
    Posts
    21
    Edit: Ah, I see the problem. Not the best way to have users login.

    Nevertheless, this should do the trick:
    Excuse my ignorance but I am still lost here.

    First, just so I can learn this, what was the problem?

    Second, how do I fix it?

    I tried just replacing my code :
    Code:
    <form name="password1">
       		          <input name="username2" type="text" value="username" size="15" style="display: none;" />
       		          <br />
       		          <strong>Please enter the couple's last name: </strong>
       		          <input type="text" name="password2" size="15" />
       		          
       		          <input type="button" value="Submit" onClick="submitentry()" />
                    </form>
    with the last part of your code:
    Code:
    <form action="#" method="post" onsubmit="return submitentry(this);">
    
      <p>
        <label>
          Please enter the couple's last name:<br>
          <input type="text" name="password" size="15">
        </label>
      </p>
    
      <p>   		          
        <input type="submit" value="Submit">
      </p>
    
    </form>
    but where do I put the first part of yours? And, what does this first part do? It looks similar to the coding from the original script but is different.

    I have attached my full code so that you may see what I am doing.
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Authorization Required</title>
    <!-- InstanceEndEditable -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="fatma.hassan@gmail.com" />
    <meta name="Description" content="FTM" />
    
    
    <link rel="stylesheet" href="../../misc/css.css" type="text/css" />
    <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    <script language="JavaScript" src="../../Templates/activateSF123.js" type="text/javascript"></script>
    </head>
    <body>
     <!-- Generated at www.csscreator.com -->
    <div id="container">
    	<div id="banner">
    		<div id='bannertitle'><!-- InstanceBeginEditable name="Banner Title" -->Welcome<!-- InstanceEndEditable --></div>
      </div>
    
    	<div id="outer">
    	  <div id="inner">
     			<div id="left">
      <div class="verticalmenu">
       <ul>
         <li><a href="../../start.html">bridegroom </a></li>
         <li><a href="../../about_us.html">aboutus</a></li>
         <li><a href="../../contact_us.html">contactus </a></li>
         </ul>
     </div> 
    
       		</div>
       		    <!-- InstanceBeginEditable name="Content" -->
       		       		    <script>
    //Encrypted Password script- By Rob Heslop
    //Script featured on Dynamic Drive 
    //Visit http://www.dynamicdrive.com 
    
    function submitentry(){
    password = document.password1.password2.value.toLowerCase()
    username = document.password1.username2.value.toLowerCase()
    passcode = 1
    usercode = 1
    for(i = 0; i < password.length; i++) {
    passcode *= password.charCodeAt(i);
    }
    for(x = 0; x < username.length; x++) {
    usercode *= username.charCodeAt(x);
    }
    //CHANGE THE NUMBERS BELOW TO REFLECT YOUR USERNAME/PASSWORD
    if(usercode==18197939563046100&&passcode==ENCODED_PASSWORD)
    //CHANGE THE NUMBERS ABOVE TO REFLECT YOUR USERNAME/PASSWORD
    {
    window.location=password+".htm"}
    else{
    alert("Sorry, Wrong name")}
    }
    </script>
    
    
    
    <div id="content">
      <h2>Authentication Required. </h2>
       		      <p>To access the site you must enter the password</p>
       		      <div id="text-input">
       		        <form name="password1">
       		          <input name="username2" type="text" value="username" size="15" style="display: none;" />
       		          <br />
       		          <strong>Please enter the couple's last name: </strong>
       		          <input type="text" name="password2" size="15" />
       		          
       		          <input type="button" value="Submit" onClick="submitentry()" />
                    </form>
            </div>
       		      <p>&nbsp;</p>
       		      <p>text text text</p>
       		      <p>&nbsp;</p>
    	        </div>
       		    <!-- InstanceEndEditable -->
    	    <!-- end content -->
    	  </div>
     		<!-- end inner -->
    	</div><!-- end outer -->
     	<div id="footer"><h1><a href="http://freethoughts.ftmblog.com">copyrights&copy;FTM</a></h1></div>
    </div><!-- end container -->
    </div>
    <script language="JavaScript" type="text/javascript">FlashSolver()</script>
    </body><!-- InstanceEnd --></html>
    Please note the line that reads
    Code:
    if(usercode==18197939563046100&&passcode==ENCODED_PASSWORD)
    . "ENCODED_PASSWORD" gets replaced by the generated hash password which is generated from the couple's last name. I manually generate this hash using a page containing the code from http://www.dynamicdrive.com/dynamicindex9/password.htm. I only have "ENCODED_PASSWORD" in the coding so that I remember to replace this with the encoded password. The "usercode==18197939563046100" is there and does not get changed because it is the default user name. I had to keep this (but hide it) because I could not figure out how to have only a password. This way the default username is already filled in (though hidden) and requires only the page specific password. Should I have done it differently?

    Also, I need to show a prompt when the password is incorrect. I couldn't see how to do this with the code you provided.

    Not the best way to have users login.
    Lastly, do you mean the code I have used is not the best or that the "work-around" is not the best. If the former, what should I use instead? I have been using this because it is very simple and yet (i think) semi secure. There is nothing confidential within the password protected pages (just the bride and groom's wedding video), but having a password makes it just a little more private from the public but open to their friends and family.

    I have tried the javascript GateKeeper but I had several users report not being able to access the site because IE disabled the script. This way seemed to be the closest to full compatibility.

    I apologize if these are dumb questions but I am trying keep up!

    Thank you for your help so far!

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Quote Originally Posted by isthistaken
    Excuse my ignorance but I am still lost here.

    First, just so I can learn this, what was the problem?
    Well there was no problem, it's just that you said you wanted users to be able to submit the form with the enter key, and now they can.

    Quote Originally Posted by isthistaken
    Second, how do I fix it?

    I tried just replacing my code with the last part of your code but where do I put the first part of yours? And, what does this first part do? It looks similar to the coding from the original script but is different.
    To fix it, just replace the original form and function code with what I posted. The function code I posted is different from the original, because I removed all parts of it that deal with the username, and changed a couple of other things round too. I also removed the username field from the form since it's not used.

    Quote Originally Posted by isthistaken
    The "usercode==18197939563046100" is there and does not get changed because it is the default user name. I had to keep this (but hide it) because I could not figure out how to have only a password. This way the default username is already filled in (though hidden) and requires only the page specific password. Should I have done it differently?
    As far as this script goes, without modifying it then yeah, just making the username field hidden does the trick. But like I said, I modified it to remove the username field entirely since it's not needed.

    Quote Originally Posted by isthistaken
    Also, I need to show a prompt when the password is incorrect. I couldn't see how to do this with the code you provided.
    The function does it in the exact same way as the original, there's an alert that pops up with a warning.
    Code:
        alert("Incorrect password.");
    Quote Originally Posted by isthistaken
    Lastly, do you mean the code I have used is not the best or that the "work-around" is not the best. If the former, what should I use instead? I have been using this because it is very simple and yet (i think) semi secure. There is nothing confidential within the password protected pages (just the bride and groom's wedding video), but having a password makes it just a little more private from the public but open to their friends and family.
    Well, using JavaScript to password protect your pages is frightfully insecure, anyone who really wanted to could probably break in with enough effort. However if there's no sensitive data being protected then I guess this isn't really an issue. A better way though would be to use .htaccess if your server supports it, with that you can password protect entire directories and when someone tries to access it, they'll get a popup dialog box asking for a user/pass (no way to remove the user box unfortunately).

    I've modified your code to include the updated password protection script. I moved the actual JavaScript code to an external file since JavaScript within an HTML page can cause problems. I've also added a DOCTYPE since you were lacking one, it's the XHTML Strict DTD since you seem to be using XHTML. The XHTML Transitional DOCTYPE is much more forgiving, but by using that it can let you fall into bad coding practices.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    Nov 2007
    Posts
    21
    Quote Originally Posted by David Harrison
    I've modified your code to include the updated password protection script.
    Thank you for all your help! This is exactly what I was looking for. I didn't know about having javascript on a separate page and couldn't for the life of me figure out how to alter the script to remove the user name. I am trying to read your revision of it to get a better understanding of how it works.

    Thanks again, I really appreciate the help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles