jQuery - Key-Stroke Fires Reload and Shouldn't

Question

I have a form that, using jQuery, will create code that asks for Admin Approval in certain instances. The instance I'm specifically working on right now asks for Admin Approval if a lower level user tries to raise their own level (this can be allowed IF someone higher than them allows it).

For several other inputs on the page, I have the following code running to accept a stroke on the "Enter" key as a substitute for pushing the "Submit" button.

$('input[kind="pw1"]').keyup(function (key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
    }
  });

This works for literally every single input I've done so far, except the one that I'm using for a user to input a higher level password. It's exactly the same as the code above, except it's input[kind="adPw"] to specify the Admin Approval input. Instead of triggering a click on the submit button, it tries to reload the page.

I've tried out a lot of different fixes thus far:

Calling by ID
Unbinding other clicks on all inputs
Unbinding other clicks on all .button
Unbinding other clicks on just this input
Checked all code for anything linking this input to a reload
Checked all code for anything linking any input to a reload

I did some research as well, but I'm not finding anything that's quite on target for the issue that I'm having. I'm also not receiving any errors or warnings in the console, and I'm 99% certain that all of my tags are properly closed.

I'm linking to a JSFiddle below so that you can also experience this crazy thing. I've re-coded it to speed up your time there. It will create two users for you: and admin, and a regular user, then it will reload the page. When it does, follow these steps:

Log in as the regular user (U: "tester", P: "password")
- The "Enter key" code is at work here on both the Username input and the password input, and it definitely works here!
Click on "Manage Users"
Change tester's level to "Level 2"
Click on "Save Changes"

This is the Admin Approval box. If you click the Submit button, it will give the alert "sub2", indicating a click on the button. If you hit "Enter" while in the input box, it should do the same thing, but instead it tries to reload the page.

JSFiddle: https://jsfiddle.net/claybarnard/r0cqs9dg/32/

Please edit your question and include your fiddle logic *in your question*. Click the edit link under the bottom left of your post, click the `<>` button (or type Ctrl+M), and make the runnable snippet on site. — Taplar, Mar 13 '19 at 18:01
And without digging into your code, it sounds like you are potentially dynamically creating elements that were not around when you created the event bindings. — Taplar, Mar 13 '19 at 18:07
It doesn't display properly in the snippet, so I left the fiddle link. Would it be more helpful to show the code that is used to create the troubled `input`? — Clay Barnard, Mar 13 '19 at 18:09
Wouldn't it be much easier to remove all this enter key nonsense and just bind to the submit event? — Kevin B, Mar 13 '19 at 18:14

Tyler Roper · Accepted Answer · 2019-03-13T18:30:17.157

Pressing Enter inside a single-input <form> will automatically submit the form. This is a quirk in most browsers.

The reason this specific area is the only one with the issue is because all of your other <form> areas have at least two inputs.

The easiest workaround is to just add another (hidden) input to the form:

<form>
  <input type="text">
  <input type="text" style="display: none;" />
</form>

Original: (demonstrating the single-input form quirk)

$("#adPw").keyup(function(key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
  }
});

$("#submit2").on("click", function() {
  alert("sub2");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><label>Please enter a password from a Level 1 or Level 2 User.</label><br><input type="password" id="adPw"></form>

<span class="button" id="submit2">Submit</span>

Solution: (with extra input added)

$("#adPw").keyup(function(key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
  }
});

$("#submit2").on("click", function() {
  alert("sub2");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><label>Please enter a password from a Level 1 or Level 2 User.</label><br><input type="password" id="adPw"><input style="display: none"></form>

<span class="button" id="submit2">Submit</span>

Here's your updated JSFiddle with this extra input added (OP's code does not work in JSFiddle for whatever reason): https://jsfiddle.net/18chywap/

See this question for more information: Why does forms with single input field submit upon pressing enter key in input

jQuery - Key-Stroke Fires Reload and Shouldn't

1 Answers1