Using the Enter key to Access Submit Button in HTML

StackOverflow https://stackoverflow.com/questions/17038470

Question

I have searched and applied almost every code I could get but nothing seems to work.

I am trying to implement validation and I just wanted that as soon as I press Enter on the Password field, it will access the submit button ALONG WITH the function being called..

Here is my entire (FAIRLY LONG :D ) code

<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
function reset()
{
   document.forms['testform'].reset();
   document.getElementById("x1").focus();
}
function passfocus()
{
document.getElementById("x2").focus();
} 
 function passreset()
 {
  document.getElementById("x2").value="";
  document.getElementById("x2").focus();
 }

 function Result()
 {
  var user=document.getElementById("x1").value;
  var pass1=document.getElementById("x2").value;
  passw=+pass1;
  var at=user.indexOf("@");
  var dot=user.lastIndexOf(".");
  var sub=user.substring(user.length, dot+1);
  for(i=0;i<sub.length;i++)
  {
    var d=sub.charAt(i);
    if(d==='0' || d===',' || d==='?' ||d===';' || d===':' || d==='+' || d==='=' || d==='-' || d==='1' ||d==='2' || d==='!' ||d==='@' ||d==='#' ||d==='$' ||d==='%' ||d==='^' ||d==='&' ||d==='*'|| d==='(' || d===')'|| d==='3' ||d==='4' ||d==='5' ||d==='6' ||d==='7' ||d==='8' ||d==='9')
    var d1=0;
    else
    var d1=1;
}
var count=0;
for(j=0;j<user.length;j++)
{
    var d2=user.charAt(j);
    if(d2=='@')
    count=count+1;              
}
var flag=0;
for(k=0; k<(user.length-1); k++)
{
    if(user.charAt(k)==='.' && user.charAt(k+1)==='.')
    flag=1;
}           
if(!user)
{
    alert("Field is mandatory");
}
else if(d1===0)
{
    alert("E-mail not valid"); 
    reset(); 
}
else if(count===2)
{
    alert("E-mail not valid");
    reset();
}
else if(at<1 || dot<at+2 || dot+2>=user.length)
{
    alert("E-mail not valid");
    reset();
}
else if (flag===1)
{
    alert("E-mail not valid");
    reset(); 
}
else
{
    if(passw===0)
    {
        alert("Please enter password");
        passfocus();
    }
    else if(pass1.length<8)
    {   
        alert("Password must be greater than 8 characters");
        passreset();
    }
    else
    {
        alert("you have successfully submitted the form");
        reset();
    }
}
}
</script>
</head>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
.sansserif{font-family:Arial,Helvetica,sans-serif;}
.td1{text-align:middle;}
table,td,th
{
border:1px solid red;
}
table
{
width:100%;
}
th
{
height:50px;
}
td
{
padding:15px;
}
</style>
<body style="background-color:AntiqueWhite;">
<h2 align="middle" style="background-color:White;"><font      color="MediumVioletRed">Student Login</font></h2>
<p align="middle" class="sansserif" style="background-color:yellow;"><b><i><font  color="Maroon">Enter Student Credentials below to login</font></i></b></p>
<table border="1" >
    <th>CREDENTIALS</th>
<tr>
      <td class="sansserif">
      <form name="testform" align="middle" 
        <div style="color:#006400" class="myCustomDiv">
        E- mail ID: <input type="text" name="usern" id="x1">
        <br>
        Password: <input type="password" name="pass" id="x2" >
        <br>
        <button type="button" onclick="Result()" align="middle" id="x3">Login</button>
        </div>
    </form>
    </td>
</tr>
</table>
</body>
</html>

Just for detailing, I didn't shorten it. It is very basic I know, I'd be really thankful if anyone could help.

Was it helpful?

Solution

You have terrible errors in your html. There is a <style> element between the </head> and the <body>. Things like that are a no-no!

And the definition for the form is not complete: you are missing the > on the start tag, as well as the action attribute. The latter is mandatory and is the cause for the inability to submit.

Other than that, you have other errors, like in the javascript.
What does, for instance, passw=+pass1 mean?
But all those are secondary to the problems with the form start tag. Repair those first, then you can test properly, because submit will work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top