When I press enter key, unable to login

Question

I have been trying to log in to a offline HTML/CSS page using the enter key but unable to start with JavaScript which needs I'm sure.

But can log in using the mouse when I click the log in button which i have created ..

How do i use the enter key stroke to log in?

This is the javascript which I have hard coded for credential test which works using the mouse click.. I want it for the enter key.. Thank you.

<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">

<h1>
   Login Page
</h1>

<div>
<form name="login">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
 <input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
 <input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>


<script language="javascript">
function check(form)
{
   if(form.user.value == "user" && form.pwd.value == "pwd")
   {
       window.open('inbox.html','_self')
   }
   else
   {
       alert("Error Password or Username")
   }
}
</script>

I want to enter the code where I hit the enter key and it must log in .. — Viraj, Oct 22 '13 at 07:37
@rink.attendant.6 Yes, you are right. However, please see: http://stackoverflow.com/questions/2267476/html-script-tag-type-or-language-or-omit-both ; And HTML5 defaults the type to text/javascript if no type is explicitly defined — Abhitalks, Oct 22 '13 at 07:38
@Mr.Orange Please make it `type="submit"` and it will work on your enter key. — Abhitalks, Oct 22 '13 at 07:38
Try this onkeypress="Javascript: if (event.keyCode==13) login()" — Iren Patel, Oct 22 '13 at 08:06
@abhitalks Did, but it reloads the same page. It must enter to the new html file and it doesn't. — Viraj, Oct 22 '13 at 08:35

score 1 · Answer 1 · answered Oct 22 '13 at 09:16

Use the submit event handler. The click handler on an element will only fire if you click on it. What you are trying to do is submitting a form, but handling the form with javascript instead of on the server. I would recommend binding that dynamically, but as you have all javascript here inline, I'll give an example inline too.

You'll need to attach a submit event handler to the form element. If you do it inline, this will work with onsubmit="..." instead. The return is there to prevent/allow the form to be submitted to the server. If the function returns 'true', the form will be submitted to the server. If the function returns 'false', the form will not be submitted. You'll also need to change the type of your submit button to submit. This will tell the browser to submit the form if that button is clicked. Alternatively, if you press enter in an input field, the browser will see this as submitting the form too.

<form name="login" onsubmit="return check(this)">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
  <input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
  <input type="checkbox" name="en" value="en" />Remember Me<br>
  <input type="submit" value="Login"/>
  <input type="reset" value="Cancel"/>
</form>

The javascript behind it will remain mostly the same. You'll notice that we passed this to the function. This will pass the element itself (in this case the form element) to the function. As said before, you'll need to return false. I've changed form to frm as form is a globally defined variable in some browsers.

function check(frm)
{
   if(frm.user.value == "user" && frm.pwd.value == "pwd")
   {
       window.open('inbox.html','_self')
   }
   else
   {
       alert("Error Password or Username")
   }

   return false;
}

An example jsfiddle: http://jsfiddle.net/AS5t5/

Its working in jsfiddle but not working on my browser offline :( — Viraj, Oct 22 '13 at 10:53
Open your developer console in the browser (right-click 'inspect element' or F12). What error pops up? — Sumurai8, Oct 22 '13 at 10:57
Do you get an error in the developer console or do you not get an error in the developer console? Are you sure you saved the file and are you sure you are looking at the updated file? — Sumurai8, Oct 22 '13 at 11:12
I still can't magically guess what is going on in your browser and as you never actually answered my question "Do you get an error in the developer console?", I am sorry, but I can't. — Sumurai8, Jan 25 '14 at 06:40

When I press enter key, unable to login

1 Answers1