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?
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?
Share Improve this question edited May 27, 2012 at 14:44 Ry-♦ 225k56 gold badges493 silver badges499 bronze badges asked May 27, 2012 at 14:17 user1404047user1404047 611 silver badge5 bronze badges 2- 3 This has nothing to do with Smarty... – Ry- ♦ Commented May 27, 2012 at 14:18
- @minitech is spot on; this is functionality that you need to use Javascript to acplish, not a server-side templating system. – Jared Farrish Commented May 27, 2012 at 14:38
6 Answers
Reset to default 5There 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/EFDZ2/
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>
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>
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>
$(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/WDvvY/
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.