CODEWITHSUNDEEP
javascripthtmlforms
AbuMariam
AbuMariam

Reputation: 3668

Prevent form submission on hitting Enter key for Text

I know this question has been asked before but I could not find a satisfactory answer for my situation. So I am asking again.

I have a simple form with 2 text boxes and a submit button. After the user enters text in either text box they should not be able to submit through the Enter key, only the submit button should allow them to submit. I thought trapping the enter keypress and returning false from the onChange event handler would do the trick but apparently not, this still causes a form submission...

function doNotSubmit(element) {

        alert("I told you not to, why did you do it?");
        return false;

}
</script>


<form id="myForm" action="MyBackEnd.aspx" method="post">

<table>
    <tbody>
    <tr>
        <td>
          Joe:  <input id="JoeText" type="text" onChange="doNotSubmit(this)">
        </td>
        <td>
          Schmoe:  <input id="SchmoeText" type="text" onChange="doNotSubmit(this)"  >
        </td>
    </tr>
    </tbody>
</table>

<input type=submit>

I tested on both Chrome and FF (latest versions).

Can you please show me how to prevent the form submission?

Thanks.

Upvotes: 15

Views: 39311

Answers (6)

Gabriel Borges
Gabriel Borges

Reputation: 101

For those using react:

    <form
      onSubmit={handleSubmit(onSubmit)}
      onKeyDown={e => {
        if (e.key === 'Enter') {
          // Keeps form from submiting on hitting enter
          e.preventDefault();
        }
      }}
    >

Upvotes: 4

optimists
optimists

Reputation: 201

How about below code snippet

 <form method="POST">
<div style="display: none;">
   <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
</form>

Upvotes: 0

cazort
cazort

Reputation: 786

I am surprised no one has given a solution that achieves the desired effect of preventing accidental submission by hitting enter on a text field without also preventing intentional submission by hitting enter while the submit button has the focus.

To this end, I recommend:

function submitFunction(e)
{
    if(document.activeElement!=document.getElementById('submit')) e.preventDefault();
}

The lazy solution, which works but often results in code that is less extensible or more work to maintain, is to put this in the onsubmit attribute of the <form> element. Often a better solution is to use addEventListener to add the function as a listener to the form element:

document.getElementById('myForm').addEventListener('submit', submitFunction);

Regardless of which method you choose to invoke the function, in your HTML make sure to give an ID to the submit button:

<input type="submit" id="submit" />

I prefer this solution because it allows the expected behavior of allowing the user to submit the form by tabbing through the form and then pressing enter when the submit button is highlighted, and it also allows clicking on the submit button, because that element will have the focus in both these cases, but it prevents accidental submission because the submit element will not have the focus in these cases.

This is an improvement for accessibility which can be important for disabled users, users using a text-only console browser, users without a mouse, and can still be marked improvement for users with a mouse that is unreliable or inconvenient. It happens more than you might realize. Plus, some users just like being able to navigate this way, so not breaking this behavior is an improvement in user experience.

Upvotes: 0

devkaoru
devkaoru

Reputation: 1162

to piggy back on @Dasein's anwser you want to prevent the default behavior instead of stopping propagation ( i.e. returning false):

document.getElementById("myForm").onkeypress = function(e) {
  var key = e.charCode || e.keyCode || 0;     
  if (key == 13) {
    alert("I told you not to, why did you do it?");
    e.preventDefault();
  }
}
<form id="myForm" action="MyBackEnd.aspx" method="post">

<table>
    <tbody>
    <tr>
        <td>
          Joe:  <input id="JoeText" type="text">
        </td>
        <td>
          Schmoe:  <input id="SchmoeText" type="text" >
        </td>
    </tr>
    </tbody>
</table>

<input type=submit>

Upvotes: 29

Yogi
Yogi

Reputation: 7184

If you include a submit button then the default form behavior is to submit on enter key. To prevent accidental submissions you could add a confirm dialog to the onsubmit event (form A). Another alternative is to replace the submit button with your own (form B). However, the user would then need to click the button to submit.

Run snippet to test (Tested in Chrome, Firefox, and IE 5-11)

<html>
<body>
Form A: This form submits on enter key    
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')">
    <input type="text" >
    <input type="text" >
    <input type="submit">
</form>
<p>
Form B: This form submits only on button click<br>
<form action="hanlder.aspx" method="post" >
    <input type="text" >
    <input type="text" >
    <input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()">
</form>
    
</body>
</html>

Upvotes: 1

user2755140
user2755140

Reputation: 2027

I think this should do:

document.getElementById("myInput").onkeypress = function(e) {
     var key = e.charCode || e.keyCode || 0;     
     if (key == 13) {
        alert("I told you not to, why did you do it?");
        return false;
     }
}

Upvotes: 2

Related Questions