1

I have a login form that opens in a modal window using Twitter Bootstrap. The enter key makes the window close instead of submitting the form. I've tried using javascript to capture the keypress and submit the form but the event listener never seems to fire. What am I doing wrong?

<!-- Modal -->
<div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="loginModalLabel">TTU</h3>
    </div>
            <form class="loginLoginForm form-inline" action="html-email/tt-facstaff" method="post">
        <fieldset class="loginLoginFieldset">
            <div class="modal-body">
                <div class="loginForm">
                    <div class="loginMessage"></div>
                    <div class="loginLogin">
                        <legend class="loginLegend">Login</legend>
                        <label class="loginUsernameLabel">
                            <div class="input-append">
                                <input class="loginUsername input-medium" type="text" name="username" placeholder="username..." />
                                <span class="add-on"><del>@tntech.edu</del></span>
                            </div>
                        </label>

                        <label class="loginPasswordLabel">
                            <input class="loginPassword input-medium" type="password" name="password" placeholder="password..." />
                        </label>
                        <input class="returnUrl" type="hidden" name="returnUrl" value="/html-email/tt-facstaff" />



                        <input class="loginLoginValue" type="hidden" name="service" value="login" />
                        <label class="checkbox">
                            <input type="checkbox" name="rememberMe"> Remember Me
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <span class="loginLoginButton"><input id="loginBtn" class="btn btn-primary" type="submit" name="Login" value="Login" /></span>
            </div>
        </fieldset>
    </form>

    <style type="text/css">
        #loginResponse{display:none;}
    </style>

    <script type="text/javascript">
     $("#loginForm *").keypress(function(e){
         e.preventDefault();

         console.log(e);
        if((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){
            $("#loginBtn").click();
            return false;
        } else {
            return true;
        }
    });
    </script>
</div>
dev_willis
  • 530
  • 4
  • 6
  • 18
  • I think you need to modify this button to have `type="button"`: `` this is definitely a duplicate, though i can't find it. – Kevin B Feb 07 '13 at 22:18
  • I think [this answer](http://stackoverflow.com/a/10405066/609176) might help - "enter submits the form and does not close the modal" – David Spence Feb 07 '13 at 22:29
  • 1
    I did not realize that my problem was with another button element. The solution to that question was also the solution to mine. Thanks! – dev_willis Feb 07 '13 at 22:39

0 Answers0