2014-05-21 170 views
3

HTML代碼:按回車鍵提交表格?

<html> 

<head> 
    <title>Registration Form</title> 

    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="css/style.css"> 
<script>  
function submitAlbum(){ 
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value); 
    var str2 = removeSpaces(document.getElementById('txtInput').value); 

    alert("condition1 is ..."+str1); 
    alert("condition2 is ..."+str2); 
    alert("condition3 is ..."+str1 == str2); 
    if (str1 == str2) 
    { 

     //alert("Entered captcha is correct"); 

    }   
    else{ 

     alert("Entered captcha is wrong"); 
     document.getElementById("txtInput").value=""; 
     return false; 
    } 

    var frm=document.getElementById("custRegistration"); 
    frm.action="CustomerinfoServlet?formidentity=doRegistrations"; 
    frm.submit(); 
} 
</script> 

</head> 

<body style=" background-color:#f9f9f9" onload="DrawCaptcha();"> 

<div style="width: 100%; background-repeat:no-repeat; margin-top:30px; height:546px; background-image: url('images/mac.png')"> 
<br/><br/> 
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;"> 
    <form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" > 

     <p class="name"> 
      <label for="name">Name <span style="color:red">*</span>:</label> 
      <input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/> 
      &nbsp;<input type="hidden" id="formidentity" name="formidentity" value="doRegistrations"/> 
     </p> 

     <p class="email"> 
      <label for="email">Email Id <span style="color:red">*</span>:</label> 
      <input type="email" name="email" id="email" pattern="((\w+\.)*\w+)@(\w+\.)+(com|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/> 
     </p> 


     <p class="Captcha" style="margin-top:5%; width: 100%;"> 
     <div style="margin:0 0 0 1%"> 
     <label class="captchalabel" style="width:38%; float: left;"><span style="margin:0 0 0 9%">Enter the text </span> <span style="color:red">*</span>:</label> 
     <input type="text" name="txtInput" id="txtInput" style="float: left;" required/> </div> 


     <div style="width: 20%; float: right;"> 
      <input type="text" id="txtCaptcha" style="background-color:#E7EBF5; text-align:center; margin: 19px 104px 0px 0px; width: 120px; border-radius:0px; border:1px solid #ccc; font-weight:bold; font-family:Arial; " /> 

      <input type="image" id="btnrefresh" onclick="DrawCaptcha();" src="images/captcha.png"/> 
     </div> 

     </p> 

     <p class="submit"> 

      <input type="submit" value="Submit" /> 
     </p> 

    </form> 
</div> 
</div> 
</body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.realperson.js"></script> 
<script type="text/javascript"> 

    //Created/Generates the captcha function  
    function DrawCaptcha() 
    { 
     var a = Math.floor(Math.random() * 10)+ ''; 
     var b = Math.floor(Math.random() * 10)+ '';  
     var c = Math.floor(Math.random() * 10)+ ''; 
     var d = Math.floor(Math.random() * 10)+ ''; 
     var e = Math.floor(Math.random() * 10)+ ''; 
     var f = Math.floor(Math.random() * 10)+ ''; 
     var g = Math.floor(Math.random() * 10)+ ''; 
     var code = a + ' ' + b + ' '+ c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; 
     document.getElementById("txtCaptcha").value = code 
    } 
    // Remove the spaces from the entered and generated code 
    function removeSpaces(string) 
    { 
     return string.split(' ').join(''); 
    } 

    </script> 
    </html> 

在此我有一個問題。問題是每當我在驗證碼文本框中輸入任何文本並按回車鍵。然後驗證碼正在改變,即數字正在刷新。 此外,表單正在提交併獲取消息('驗證碼錯誤')。 任何人都可以告訴我如何在文本框中輸入驗證碼後按下回車鍵來停止表單提交?

+0

你爲什麼按Enter鍵,如果你不想提交表單? – dfsq

+1

@dfsq那是因爲他想提交表單,而是驗證碼被刷新:) –

回答

1

那麼你可以禁用使用jQuery驗證碼輸入字段Enter按鈕。

一個例子是:

$('#txtInput').bind("keypress", function (e) { 
    if (e.keyCode == 13) return false; 
}); 

哪裏keyCode == 13Enter關鍵

更新 要添加上面的代碼在你的文件,只需複製並粘貼到您的HTML:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#txtInput').bind("keypress", function (e) { 
     if (e.keyCode == 13) return false; 
    }); 
}); 
</script> 
+0

b,其中嵌入上面這段代碼在我的代碼???? – User2413

+0

是的,只是查看我的更新回答 –

+0

我剛剛更新它,它應該是'#txtInput'而不是'#txtCaptcha' –

0

您可以使用下面的jQuery代碼做到這一點:

$('#custRegistration').bind("keyup keypress", function(e) { 
    var code = e.keyCode || e.which; 
    if (code == 13) {    
    e.preventDefault(); 
    return false; 
    } 
}); 
0

LOL :) AS dfsq在評論說: 「如果您不想提交表單,爲什麼按Enter鍵?」

但阻止與輸入輸入做此發送表單:

$('body').on('keydown', '#chaptcha_input', function(e) { 
    if(e.which == 13 && !e.shiftKey) { 
     e.preventDefault(); 
    } 
}); 
+0

這是因爲他想提交表單,但相反,驗證碼會刷新:) –

+0

@RazvanB。你能告訴我把你的代碼放在我的代碼中嗎? – User2413

0

試試這個

$('#txtInput').on("keyup",function(e){ 
    if(e.keyCode == 13) 
     return false; 
    // do your stuff here if not enter key pressed 
});