Submit form only when submit button clicked and prevent "Enter" submitting form

Question

I want to stop a user submitting a form upon clicking enter.

This works for that

$(document).ready(function() {
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });

However I have other buttons on the page that when I tab to and click enter to avail of their functionality, this is blocked via this function.

The button sits as so:

<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>

And I only want to submit the form when enter pressed while my submit button is selected.

<input type="submit" name="submit" value="Submit" tabindex="40" class="submit"/>

How would I do this?

EDIT

I see the answer in the attached Stackoverflow but he allow people to press Enter if they have completed all the fields:

I don't want a user to press Enter unless they have a button selected(i.e. Can't press Enter, tab to button, can press enter, which will trigger the button to do its functionality and not submit the form.

The form works on a Tabbing basis, so a user will tab over all the fields.

Maybe this issue is usefull to you: [http://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter](http://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) — spm, May 04 '17 at 15:58
Possible duplicate of [Prevent users from submitting a form by hitting Enter](http://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) — Adrian J. Moreno, May 04 '17 at 15:59
Check the target of the event. See https://api.jquery.com/event.target/ — Eytibi, May 04 '17 at 16:00
Yes saw that, but couldn't get to work for my situation, added an edit to explain. — Blawless, May 04 '17 at 16:15

cнŝdk · Answer 1 · 2017-05-04T16:28:33.793

2

Binding the keydown event to the whole document will affect all inputs and forms on the page, you may have several ones in your page so it will mess up the whole page logic.

You can bind it to a specific form instead:

$("#myForm input").not("#addButton").keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
});

Demo:

$("#myForm input").not("#addButton").keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    return false;
  }
});

form input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="" id="myForm">
  <input type="text" name="input1" />
  <input type="text" name="input2" />
  <input type="text" name="input3" />
  <input type="submit" name="submit" value="Submit" tabindex="3" class="submit" />
</form>

Note:

I used #myForm as test id here to target a specific form in the page, you just need to use your form id.
Using jQuery .not() method in .not("#addButton") won't affect the button with id="addButton".

edited May 04 '17 at 16:28

answered May 04 '17 at 16:13

cнŝdk

31,391
7
56
78

I have another button within the form with id='addButton' and I want to be able to press enter on that button also. – Blawless May 04 '17 at 16:17
@Blawless In that case you can use jQuery `.not()` to exclude this button, I am editing my code. – cнŝdk May 04 '17 at 16:18
I can't seem to tab to the Submit button in your example. – Scott Marcus May 04 '17 at 16:25
@ScottMarcus That's because, I used his own code wich has `tabindex="40"` , so we just need to change it to 4 in my example, I edited my code. – cнŝdk May 04 '17 at 16:27
1

I think that should be 3, not 4. – Scott Marcus May 04 '17 at 16:27
Hmmm. Still can't tab to it. – Scott Marcus May 04 '17 at 16:29

Scott Marcus · Accepted Answer · 2017-05-04T16:32:06.170

First, keep in mind that what you are attempting breaks UI accessibility standards.

Bearing this in mind, you'll need to stop using a true "submit" button and use a regular button that impersonates the submit button.

Next, you'll need to manually trigger the click events for all non-submit button buttons via code.

Here's a working example. See the comments for details:

$(document).ready(function() {
  $(window).on("keydown", function(event){
    // Check to see if ENTER was pressed and the submit button was active or not
    if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) {
      // It was, so submit the form
      document.querySelector("form").submit();

    } else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){
      // ENTER was pressed, but not while the submit button was active
       alert("Enter pressed on something other than submit button.");
                
      // Cancel form's submit event
      event.preventDefault();
                
      //  Invoke click event of target so that non-form submit behaviors will work
      event.target.click();
     
      // Tell JQuery to cancel the event
      return false;
    }
  });
        
  // Non-submit button event handling
  $("#btnOther").on("click", function(){
    alert("Other button clicked!");
  });
        
  // Set up your "regular" button to act as a "submit" button when it is clicked
  $("#btnSubmit").on("click", function(){
  // Submit the form
    document.querySelector("form").submit();     
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=# method=post>
  <input name=test>
  <input type=button id="btnOther" value="Other Button">
  <input type=button id="btnSubmit" value=Submit>

</form>

if I wanted to "tab" when entered is pressed instead of doing nothing, how would I go about this? — Blawless, May 08 '17 at 14:21
@Blawless This may help:http://stackoverflow.com/questions/1803338/simulate-the-tab-key-function-in-javascript — Scott Marcus, May 08 '17 at 14:23

Submit form only when submit button clicked and prevent "Enter" submitting form

2 Answers2