CODEWITHSUNDEEP
javascripthtmlformssecuritycaptcha
User2413
User2413

Reputation: 615

Pressing enter key submit the form?

HTML code:

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

In this I have an issue. The problem is whenever I enter any text in the captcha textbox and press enter key. Then the captcha code is changing, ie, numbers are refreshing. Also form is getting submit and getting the message ('captcha is wrong'). Can anyone tell me how to stop form submit when we press enter key after entering captcha in textbox?

Upvotes: 3

Views: 2099

Answers (4)

Razvan B.
Razvan B.

Reputation: 6771

Well you could disable the Enter button on the captcha input field using jQuery.

An example being:

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

Where keyCode == 13 is the Enter key

Update To add the above code in your file, just copy and paste this into your html:

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

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this

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

Upvotes: 0

Mr.TK
Mr.TK

Reputation: 1836

LOL :) AS dfsq said in comment: "Why do you press Enter if you don't want to submit the form?"

But to block sending form with enter on input do this:

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

Upvotes: 0

Arko Elsenaar
Arko Elsenaar

Reputation: 1739

You can do this using the following jQuery code:

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

Upvotes: 0

Related Questions