jQuery button submit with enter key function

Question

I have a button submit like this :

<input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/>

and I have jQuery submit like this :

$(document).ready(function()
    {
        $('#button_sign_in').click(function(){
             console.log('login');
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
        });
    });

The problem is : we can't submit using enter key, so user must click the button Sign in to submit.

What I want ? set enter key into JS function, so user can choose submit using enter key or click the button Sign in.

Thanks for any help.

What else does the form consist of? That's what's going to determine how to fix the problem. — DevlshOne
– DevlshOne, Commented Jul 12, 2013 at 1:59
the button must be focused (using tab key) and then hit enter. — Habibillah
– Habibillah, Commented Jul 12, 2013 at 2:08
oh.. you wanted the presskey event on the button?.. it's the sample principal as described below.. $("#button_sign_in").bind("keypress", function(e){ //check for e.keyCode === 13.. if true do post }) — Brett Caswell
– Brett Caswell, Commented Jul 12, 2013 at 2:59

yeyene · Accepted Answer · 2014-11-03 03:45:07Z

Check this demo http://jsfiddle.net/yeyene/hd7zqafg/

First click on the result frame (because there are another frames), and press enter, the submit button click event will fire on Enter key press & on button click.

$(document).ready(function()               
    {
        // enter keyd
        $(document).bind('keypress', function(e) {
            if(e.keyCode==13){
                 $('#button_sign_in').trigger('click');
             }
        });

        $('#button_sign_in').click(function(){
            alert('You click submit!');
             console.log('login');
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
        });
    });

Nick C. · Accepted Answer · 2013-07-12 02:21:51Z

2

Extract the call to $.ajax to a new function called something like submitForm.

Then bind that function to all the elements that can cause a submission:

function submitForm() {
    $.ajax... etc.
}

$('#button_sign_in').on('click', submitForm);
$('#your_input_textbox').on('keypress', function(e) {
    if (e.keyCode === 13) {
        submitForm();
    }
});

answered Jul 12, 2013 at 2:21

Nick C.

1715 bronze badges

1 Comment

Brett Caswell Over a year ago

I opted to duplicate the code in my sample for the debugger portion, but yeah.. a method call with a string argument is probably the way to go.

hzoo · Accepted Answer · 2013-07-12 02:09:14Z

1

wrap the input in a form. If you press enter in the text box it will submit the form.

HTML

<form>
    <input type="text"/>
    <input type="submit" id="button_sign_in" class="button_sign_in" value="Sign in"/>
</form>

change the input type to "submit" and call .submit() instead of .click() on the form.

JS

$('form').submit(function(){
    console.log('login');
});

http://jsfiddle.net/nQ5fN/

answered Jul 12, 2013 at 2:09

hzoo

1,37412 silver badges9 bronze badges

3 Comments

HiDayurie Dave Over a year ago

Hi, I using button shake. So if I change the input type using submit type, the button wont work.

hzoo Over a year ago

What do you mean by button shake? There isn't enough information.

Brett Caswell Over a year ago

I'm pretty sure the form element's submit method is part of the form element, and has nothing to do with whether or not there is an instance of a input[type=submit] child element of that form.

jsonx · Accepted Answer · 2013-07-12 02:09:28Z

0

Change your input type as submit and prevent default of your submit button. Also your submit button should be wrapped by a form.

$("form").on("submit", function() { return false; });

answered Jul 12, 2013 at 2:09

jsonx

1,0863 gold badges14 silver badges21 bronze badges

1 Comment

Brett Caswell Over a year ago

yeah.. OP gave an incomplete code sample, but what is the point of returning false on a form submit?.. or event bothering with event in general?.. he isn't attempting to submit the form as 'application/x-www-form-urlencoded'

Aldi Unanto · Accepted Answer · 2013-07-12 02:12:11Z

0

If you only use jQuery.Ajax, certainly not be able to submission when you press enter. You have to add <form></form> tag to realize it, and change the JS.

$('form').submit(function(){ //do ajax here })

answered Jul 12, 2013 at 2:12

Aldi Unanto

3,6821 gold badge25 silver badges31 bronze badges

Comments

Brett Caswell · Accepted Answer · 2013-07-12 02:29:17Z

You need to attach an event to the proper element (probably an input), which I assume is a 'username' (textbox) input or (more likely) the 'password' (password) input.

jsFiddle: http://jsfiddle.net/tyxPu/

jQuery Section

$(document).ready(function () {
    var xhrJSON;
    $('#button_sign_in').click(function () {
        console.log('login');
        xhrJSON = $.ajax({
            url: "about:blank",
            type: "post",
            data: $('#login_form').serialize(),
            dataType: 'json',
            success: function (data) {
                if (data.status == 'SUCCESS') {
                    window.location = 'home.php';
                } else {
                    /*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
                    $('#username').focus();
                    $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>")
                }
            },
            error: function (e) {
                console.log('error:' + e);
                $("#debugger").append("<p>Error - Button Click - Failed to 'Sign In'</p>")
            }
        });
    });
    $("#username").keypress(function (event) {
        if (event.which == 13) {
            xhrJSON = $.ajax({
                url: "about:blank",
                type: "post",
                data: $('#login_form').serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'SUCCESS') {
                        window.location = 'home.php';
                    } else {
                        /*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
                        $('#username').focus();
                        $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>");
                    }
                },
                error: function (e) {
                    $("#debugger").append("<p>Error - Keypress - Failed to 'Sign In'</p>");
                }
            });
        }
    });
});

HTML Section

<form id="login_form">
    <input type="textbox" id="username" placeholder="User Name" />
    <input type="button" id="button_sign_in" value="Sign In" />
</form>
<div id="debugger"></div>

note, in this sample I changed the url to 'about:blank' and commented out the shake method.

Rana Bhopale · Accepted Answer · 2018-07-16 09:55:39Z

0

 // Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

answered Jul 16, 2018 at 9:55

Rana Bhopale

515 bronze badges

Collectives™ on Stack Overflow

jQuery button submit with enter key function

7 Answers 7

Comments

1 Comment

3 Comments

1 Comment

Comments

jQuery Section

HTML Section

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

3 Comments

1 Comment

Comments

jQuery Section

HTML Section

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related