We're using custom buttons to submit forms. A click event is assigned to .btn-submit's to submit the respective form. However, without some type of <button type="submit"> or <input type="submit"> element located within the <form>, pressing ENTER in either the username or password text field does not submit the form.

How do I still allow users to submit a form when pressing ENTER in an input field without a type="submit" element present in the <form>?

HTML

<form action="post.php" method="post">
<p><b>Username</b> <input type="text" name="username" style="width: 300px; font-size: 18px"></p>
<p><b>Password</b> <input type="password" name="password" style="width: 300px; font-size: 18px"></p>

<input type="hidden" name="user_login" value="1">
<div class="btn-inline btn-green btn-submit">Log In</div>
</form>

JS

$(document).ready(function()
{
    $('.btn-submit').on('click', function(e)
    {
        $(this).parents('form:first').submit();
    });
});

We're using custom buttons to submit forms. A click event is assigned to .btn-submit's to submit the respective form. However, without some type of <button type="submit"> or <input type="submit"> element located within the <form>, pressing ENTER in either the username or password text field does not submit the form.

How do I still allow users to submit a form when pressing ENTER in an input field without a type="submit" element present in the <form>?

HTML

<form action="post.php" method="post">
<p><b>Username</b> <input type="text" name="username" style="width: 300px; font-size: 18px"></p>
<p><b>Password</b> <input type="password" name="password" style="width: 300px; font-size: 18px"></p>

<input type="hidden" name="user_login" value="1">
<div class="btn-inline btn-green btn-submit">Log In</div>
</form>

JS

$(document).ready(function()
{
    $('.btn-submit').on('click', function(e)
    {
        $(this).parents('form:first').submit();
    });
});

• javascript
• jquery
• html
• forms

Share Improve this question Follow asked Oct 17, 2014 at 21:27 user3010339user3010339 4

• You need to capture the enter key press, preferably using jQuery delegates on the form. – Jason Commented Oct 17, 2014 at 21:30
• possible duplicate of Submitting a form by pressing enter without a submit button – C3roe Commented Oct 17, 2014 at 21:31
• why you're not don't want to add a button (type=submit)? you can make it invisible via css: display: none – timaschew Commented Oct 17, 2014 at 21:38
• See parody' answer. It's close to what you want and what I'd snippet for you. Instead of doing a button click element after the preventDefault, just form.submit() – Jason Commented Oct 17, 2014 at 22:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

you could do something like this to make it so when the enter key is pressed within the input it activates the submit button

$('form').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});

EDIT

This wont cause the submit button to be clicked if return is pressed in the textarea it will only do that for inputs of the type text now.

$('input:text').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});

You need to capture the enter key press, preferably using jQuery delegates on the form. Just target your delegate at the form and looking at input elements, or body looking at form, I suppose. Essentially it's saying "look at this top element, trigger X action on the inner element". Your parent would be form, inner input, action is keydown or keyup

See this : jQuery delegate method not working for keydown and keypress

Then in the function test for what keypress was hit. If enter, submit. If not, return false.

PS: when I'm not on mobile, I can do a code snippet for you.

And here is why:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

Source: http://api.jquery./submit/