Dynamically changing which button is pressed with "enter"

Question

I have a form with two buttons and some text inputs. By default if you press enter it will "click" the first button. I'd like to make it so that if you type in either of the text boxes, if you press enter the second button will be the one to be clicked.

In the simplified example below, pressing enter will by default "click" the log in using facebook button. This will happen even if something is entered in the email or password text inputs. I'd like it so that if something is entered in either the email or password inputs, then pressing enter will "click" the login with email/password button.

<form>
    <button class="login-facebook">Log in with Facebook</button>
    <input type="text" class="email" placeholder="email"><br>
    <input type="password" class="password" placeholder="password"><br>
    <button class="login-password">Log in with email/password</button>   
</form>

Goal is something like:

$('.email').add('.password').on('change', function() {
    $('.login-password').setToBeNewDefaultClickIfEnterIsPressed();   
});

Where setToBeNewDefaultClickIfEnterIsPressed() changes the default enter.

AFAIK, it doesn't work that way. Your best option would probably be to set up a keydown handler on the document, listen for someone to hit enter, then `preventDefault` and submit whichever form you want. — Jason P, Aug 12 '13 at 17:44

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

See: Multiple submit buttons on HTML form – designate one button as default

You can also make them separate forms and play with that. See also: preventDefault

edited May 23 '17 at 12:20

Community

1
1

answered Aug 12 '13 at 17:45

Curtis Mattoon

4,642
2
27
34

score 0 · Answer 2 · answered Aug 12 '13 at 18:09

Try this.

I threw in a field that let's you select the button you want to be the default, just to show how it works. If that field is empty, I made the default button #2.

jsFiddle here

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            var defaultbutt = 2;
            $(document).ready(function() {

                $('[id^=txt]').blur(function() {
                    if ($(this).val() != '') {
                        defaultbutt = $('#pickabutt').val();
                        if (defaultbutt=='') defaultbutt = 2;
                    }
                });

                $('#pickabutt').blur(function() {
                    defaultbutt = $('#pickabutt').val();
                    if (defaultbutt=='') defaultbutt = 2;
                });

                $(document).keypress(function(e) {
                    if(e.which == 13) {
                        $('#mybutt' + defaultbutt).click();
                    }
                });

                $('[id^=mybutt]').click(function() {
                    var num = $(this).val();
                    alert('You clicked button: ' + num);
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    Login:<br /><input id="txtLogin" type="text" /><br />
    PWord:<br /><input id="txtPassword" type="password" /><br />
    <input type="button" id="mybutt1" value="One" />
    <input type="button" id="mybutt2" value="Two" />
    <input type="button" id="mybutt3" value="Three" />

    Default button Number:<br /><input id="pickabutt" type="text" /><br />

</body>
</html>

Dynamically changing which button is pressed with "enter"

2 Answers2