I want to prevent the enter key from submitting the form, I want it to act as a TAB key to just jump to the next field in the form or the next element.
Is this possible in HTML/JS?
if not possible to make the enter button act as a tab, is there a way to prevent the submission of the form and make only the form be submitted using the buttons on the HTML??
EDIT:
I have received a solution to this problem when I was asking for another problem!
here you can find the solution.
I want to prevent the enter key from submitting the form, I want it to act as a TAB key to just jump to the next field in the form or the next element.
Is this possible in HTML/JS?
if not possible to make the enter button act as a tab, is there a way to prevent the submission of the form and make only the form be submitted using the buttons on the HTML??
EDIT:
I have received a solution to this problem when I was asking for another problem!
here you can find the solution.
Share Improve this question edited May 23, 2017 at 11:55 CommunityBot 11 silver badge asked Jan 4, 2011 at 16:12 sikassikas 5,53328 gold badges78 silver badges123 bronze badges 3-
2
Yes it's possible, but why confuse your users by changing the default behaviors? It's better to validate the form (
onsubmit) and ask the user to correct their answers if they are missing a field, or have bad input. – zzzzBov Commented Jan 4, 2011 at 16:35 - @zzzzBov: I want to prevent form submission on enter key, I want it to be done with the buttons on the form only. – sikas Commented Jan 4, 2011 at 16:40
- 3 I am able to read; what you're suggesting is a bad idea. "why?" you're bound to ask. You probably haven't thought about accessibility. Users who are blind rely on certain interactions (namely: tab and enter) to submit forms. If you nix those keycodes, you're ruining their experience. don't do it. – zzzzBov Commented Jan 4, 2011 at 16:46
4 Answers
Reset to default 2For accessibility/usability reasons, you really shouldn't prevent the Enter key from submitting the form (assuming the browser was going to do that anyway; IIRC, some older browsers didn't).
Assuming that you want to do this because the submit button has a click handler you'd like to happen for every form submission, you should instead move that code into a separate function and invoke it from a the form's submit event.
In jQuery, it would look something like:
$('#myForm').submit(function(e) {
if (!isValid()) {
e.preventDefault(); // Could also be `return false;` but I prefer preventDefault.
}
});
See the docs.
FYI, if you're trying to do some validation, you should check out the validation plugin.
<html>
<body>
<script>
function tmpFn(val){
if(event.keyCode=='13'){
if (val<4)
document.forms["yourform"].elements["box" + (val+1)].focus();
else
document.yourform.submit();
return false;
}
return true;
}
</script>
<body>
<form name="yourform" action="#">
<input type="text" name="box1" onkeypress="return tmpFn(1)"><br>
<input type="text" name="box2" onkeypress="return tmpFn(2)"><br>
<input type="text" name="box3" onkeypress="return tmpFn(3)"><br>
<input type="text" name="box4" onkeypress="return tmpFn(4)"><br>
<input type="submit" name="done" value="Submit">
</form>
</body>
</html>
EDIT: Refrain from using 'eval'.. Thanks Tim and Andy!
It might be possible to solve this using some jQuery - although I don't know how to imitate a keypress.
$(document).keyup(function(e) {
if(e.keyCode == 13)
{
//Code to imitate keypress of Tab key
}
});
Edit: Made a quick jsFiddle to "imitate" tab presses, which would go to the next field like you mentioned. (This one works based on the Enter key being pressed in a field)
jsFiddle
Off the top of my head, to prevent the enter button from submitting the form, don't use a submit button, rather use a <input type="button" ... onclick="submitForm();"> to call javascript to submit the form. I could be wrong, but I believe this should prevent pressing enter on any other element submitting the form.