使用Enter键在HTML中访问提交按钮

时间:2013-06-11 07:15:42

标签: javascript html css enter submit-button

我搜索并应用了几乎所有可以获得的代码,但似乎没有任何效果。

我正在尝试实现验证,我只想在密码字段按Enter键时,它将访问提交按钮ALONG WITH被调用的函数..

这是我的整个(公平的长:D)代码

<!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>

仅仅为了详细说明,我没有缩短它。我知道这是非常基本的,如果有人能提供帮助我真的很感激。

1 个答案:

答案 0 :(得分:0)

你的HTML中有很多错误。 <style></head>之间有<body>个元素。这样的事情是禁止的!

表单的定义不完整:您错过了开始标记上的>以及action属性。后者是强制性的,是无法提交的原因。

除此之外,您还有其他错误,例如javascript 例如,passw=+pass1是什么意思? 但所有这些都是表单开始标记的问题。首先修复那些,然后你可以正确测试,因为提交将起作用。

相关问题