Submit form on enter, with multiple included files on page

Question

I am trying to allow my login modals to be submitted on enter, I have multiple login modals included on a single page, so I do not want them to all be submitted when a user presses enter. These modals are hidden by default. When they press enter it should trigger a click on the modal-footer div.

HTML for modals:

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header" id="modal-header">
            <span class="close">×</span>
            <h1>Team Login</h1>
        </div>
        <div class="modal-body">
            <div style="text-align:left;">
                <form id="teamLogin" name="teamLogin" method="post">
                    <a>User ID</a>
                    <input type="text" name="username" id="username"><br>
                    <a>Password</a>
                    <input type="password" name="password" id="password">
                </form>
            </div>
        </div>
        <div class="modal-footer" id="modal-footer">Login</div>
    </div>
</div>

JavaScript for first modal submit:

if ($("#myModal").length != 0) {
    $(window).keyup(function(e) {
        var keyCode = e.which;
        if (keyCode == 13) {
            $("#modal-footer").trigger("click");
        }
    });
}

Here is the JavaSript for second modal, they are the exact same except for different ID's:

if ($("#myModalCarrier").length != 0) {
    $(window).keypress(function(e) {
        var keyCode = e.which;
        if (keyCode == 13) {
            $("#modal-footerCarrier").trigger("click");
        }
    });
}

Currently on enter, when myModal is displayed it also submits myModalCarrier, but not the other way around.

Since you're adding the listeners to the `window` in both instances it will always fire off both pieces of code, you may want to look into adding the key listener on the actual form inputs. Example: https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — Marcela, Mar 15 '18 at 15:53
@Marcela I tried adding a listener to each separate modal but the simulated click would not fire. — cela, Mar 15 '18 at 15:56
I'm not suggesting adding it to the modal, I'm suggesting adding it to the input fields. Additionally, instead of simulating the click, could you just call the same function that the click handler calls? — Marcela, Mar 15 '18 at 16:00

score 2 · Accepted Answer · answered Mar 15 '18 at 16:10

May I offer an alternative that simply uses HTML the way it is designed without the use of JavaScript at all? Namely, the submit action is designed to happen on enter by default on HTML forms.

If you provide the "multiple modals on a single page" code example, I will address that specific issue too. As it is, I'm answering based upon your example code provided.

To implement, surround your modal with the <form> element and make the Login a button of type="submit".

Here is the result (and jsbin if your prefer: https://jsbin.com/lopasaxucu/edit?html,output):

<form id="teamLogin" name="teamLogin" method="post">
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header" id="modal-header">
            <span class="close">×</span>
            <h1>Team Login</h1>
        </div>
        <div class="modal-body">
            <div style="text-align:left;">
                    <a>User ID</a>
                    <input type="text" name="username" id="username"><br>
                    <a>Password</a>
                    <input type="password" name="password" id="password">
            </div>
        </div>
        <div class="modal-footer" id="modal-footer">
          <button type="submit">Login</button>
      </div>
    </div>
  </div>
  </form>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

I fixed it up to have a submit button and form tag surrounding, but on enter it does not submit. — cela, Mar 15 '18 at 17:53
@Alec - Does the sample I provided in two different places work for you? If so, in order for me to help you, I need you to think about and explain the differences between what I have proven works and what you are attempting in your code. Please reproduce what does not work in jsfiddle just as I did for you. Thanks. — Randy Casburn, Mar 15 '18 at 18:14
Apologies, something must have been saved in cache, but I got it working, thank you — cela, Mar 15 '18 at 19:31

Submit form on enter, with multiple included files on page

1 Answers1