CODEWITHSUNDEEP
javascripthtml
user1404047
user1404047

Reputation: 61

How to disable enter button in a form?

I have this HTML form:

<head>
<title>log in</title>
</head>
<body>
<form action="login.php" method="POST">
user name : <input type="text" name="user"> <br>
user pass : <input type="password" name="pass"> <br>
<input type="submit" value="submit"> 
</form>
</body>

I want to make it so that the form can only be submitted by clicking the button - not by pressing Enter. How can I do this?

Upvotes: 1

Views: 9260

Answers (6)

Raja C
Raja C

Reputation: 159

Add the below script to the section of your page.

<script type="text/javascript">
    function stopRKey(evt) 
    {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement)?evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type=="text"))  
        {
            return false;
        }
   }
   document.onkeypress = stopRKey;
</script>

Upvotes: 0

Vincent Tee
Vincent Tee

Reputation: 1

Just to add on to VisioN's answer, there might be instances where the input is not a direct child of the form, so in these cases simply referring to the form as this.form will work.

<html>
<head>
    <title>log in</title>
</head> 
<body>
    <form action="login.php" method="POST" onsubmit="return false;">
        user name : <input type="text" name="user"> <br>
        user pass : <input type="password" name="pass"> <br>
        <div>
            <input type="button" value="submit" onclick="this.form.submit();">
        </div>
    </form>
</body>
</html>​​​​​​​​

Upvotes: 0

Gravity Grave
Gravity Grave

Reputation: 2862

This is what worked best for me:

<input id="input_id" type="text">

<script>
    // prevent the enter key from submitting the form if input_id has focus to prevent accidental submission
    document.getElementById('input_id').addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });
</script>

Upvotes: 0

BAB
BAB

Reputation: 19

In fact, I think the answer is simpler than that. If you don't want the Enter key to cause a submit, do not have a button or input of type "submit" in your form. onsubmit="return false;" didn't do anything for me. Firefox 27 and IE 11.

Upvotes: -1

Mandar Limaye
Mandar Limaye

Reputation: 1910

$(document).ready(function() {

    function checkKey(e) {
        if (e.keyCode == 13) {

            if (!e) var e = window.event;

            e.cancelBubble = true;
            e.returnValue = false;

            if (e.stopPropagation) {
                e.stopPropagation();
                e.preventDefault();
            }
        }
    }

    $("input").keydown(checkKey);
})​

This should work in all browsers. It requires JQuery to make life simpler. DEMO: http://jsfiddle.net/WDvvY/

Upvotes: -1

VisioN
VisioN

Reputation: 145458

There are plenty of solutions for that. Here is one of the simplest:

<html>
<head>
    <title>log in</title>
</head>
<body>
    <form action="login.php" method="POST" onsubmit="return false;">
        user name : <input type="text" name="user"> <br>
        user pass : <input type="password" name="pass"> <br>
        <input type="button" value="submit" onclick="this.parentNode.submit();"> 
    </form>
</body>
</html>​​​​​​​​

DEMO: http://jsfiddle.net/EFDZ2/

Upvotes: 5

Related Questions