how to prevent submitting a form by enter and also keep enable enter for other field like search in grid etc

Question

I have tried all methods like onkeydown="return !(event.keyCode==13)" and onsubmit="return false;" inside form tag but these are stopping enter key to work for rest of the form as well.

All i want is let enter key enable for rest of the form but my form only get submitted when i click a particular button with class/id. It would be better if the solution is in core javascript or prototype.js library.

Answer 1

In case of you can't run the snippet, https://jsfiddle.net/begpv4et/

 x.addEventListener("keypress",function stopThatCrazyActionPlease(e) { if (e.keyCode === 13) { e.preventDefault(); } }) // replace x with your form's ID

 <form action="action_page.php" id="x"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <!-- This form is not affected because of different id --> <form action="action_page.php" id="y"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>

I set the ID of the first form to x so I can access it in DOM later.

Then, I listen for an event called keypress . The name says it all.

The line e.keyCode === 13 means if the user pressed ENTER, I will prevent the default behaviour : submit the form e.preventDefault() .

You will see that line of code very often when you listen to events like ENTER pressed, onClick , onHover , et cetera.

Answer 2

The @Learn How To Be Transparent's answer doesn't solve the problem, since it merely prevents {Enter} key to work, even as it's pure entry action.

This becomes clear if we replace one of the <input> 's by <textarea> in its snippet.
Here we can see that striking {Enter} doesn't insert a line-break in the 1st form (the one which is monitored by the keypress event):

 x.addEventListener("keypress",function(e) { if (e.keyCode === 13) { e.preventDefault(); } }) // replace x with your form's ID

 <form action="action_page.php" id="x"> First name:<br> <textarea>Mickey</textarea> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <!-- This form is not affected because of different id --> <form action="action_page.php" id="y"> First name:<br> <textarea>Mickey</textarea> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>

So another approach must be used to achieve what the OP looks for.

A simple way may be like this:

1. Use type="button" instead of type="submit" for the <input> or <button> dedicated to the form submission: so striking {Enter} key has no effect upon submission, and can be freely used as entry part everywhere.
2. Then to have a mean for the form to be submitted, attach an onclick event to this button, and launch form submission in its handler.

Here is a working example.
In order to clearly show its work, I replaced form.submit() by an alert() :

 submit_button.addEventListener("click", function(e) { // here is the real code for form submission: // e.target.form.submit(); // currently replaced by: alert('Form submission now'); });

 <form action="action_page.php" id="x"> First name:<br> <textarea>Mickey</textarea> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input id="submit_button" type="button" value="Submit"> </form>