Submit form on Enter key with javascript

Question

I'm not sure what I am doing wrong here. I want the enter key to work as well as clicking the button.

<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
   <input name="paypal_email" type="text" value="whatever" id="email" />
   <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>
</form>

I found the solution here: http://stackoverflow.com/questions/29943/how-to-submit-a-form-when-the-return-key-is-pressed — James Gentes, Aug 23 '15 at 17:28

score 35 · Answer 1 · answered Dec 10 '13 at 02:12

35

Try this:

document.getElementById('email').onkeydown = function(e){
   if(e.keyCode == 13){
     // submit
   }
};

answered Dec 10 '13 at 02:12

Ringo

3,795
3
22
37

score 15 · Answer 2 · answered Jan 06 '15 at 10:59

Please use below code snippet...It should be added into script block

<script>
    document.onkeydown=function(evt){
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if(keyCode == 13)
        {
            //your function call here
        }
    }
</script>

score 10 · Answer 3 · answered Dec 10 '13 at 02:36

All below codes should be added into script block or file. define submit function:

function submitForm(){
    document.priceOptionForm.submit();
    document.priceOptionForm.method='post';
}

For the enter key to submit form:

document.onkeydown=function(){
    if(window.event.keyCode=='13'){
        submitForm();
    }
}

For the link to work:

document.getElementById("profile_price").onclick=submitForm;

You can refer to http://jsfiddle.net/honglonglong/YMX2q/ for some trying.

score 8 · Answer 4 · answered Dec 10 '13 at 02:12

8

Use an <input type="submit"> instead of a link. Then the enter key will work automatically.

answered Dec 10 '13 at 02:12

sbking

7,630
24
33

Nice, but beware if you have some kind of javascript validation attached to the "onSubmit" of your form. – statosdotcom May 16 '22 at 23:28

Waqas Tahir · Answer 5 · 2018-10-11T10:04:29.187

5

simply make a hidden button like this
HTML

<input type="submit" id="submitbtn"  />

CSS

#submitbtn{display:none;}

when the user will hit the enter button the form will be submitted
Don't forget to put the type="submit"

edited Oct 11 '18 at 10:04

answered Jul 02 '14 at 13:57

Waqas Tahir

7,171
5
25
47

6

– Boontawee Home Dec 10 '15 at 01:48

score 1 · Answer 6 · edited Aug 08 '18 at 00:05

1

// Process form if use enter key. put script in head.    
document.onkeyup = enter;    
function enter(e) {if (e.which == 13) submitForm();}

// uses keyup not down as better practice imo    
// submitForm() is user function that posts the form

edited Aug 08 '18 at 00:05

Stephen Rauch

47,830
31
106
135

answered Aug 07 '18 at 23:34

iGuest

71
5

score 1 · Answer 7 · answered Feb 06 '20 at 09:44

You Can Put a Default Button ID in form tag is automatically trigger

<form id="form1" runat="server" defaultbutton="Button1">

<asp:Button ID="Button1" runat="server" Text="Button"

    OnClick = "Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="Button"

    OnClick = "Button2_Click" />

<asp:Button ID="Button3" runat="server" Text="Button"

    OnClick = "Button3_Click" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</form>

if you want to do code behind refer below this.Form.DefaultButton = "Button1"; — Nandhu, Feb 06 '20 at 09:47

score 0 · Answer 8 · answered Dec 10 '13 at 02:17

Oh that is because the HTML form element does not recognize the link as a button, to click.. you need to replace it with a button...

<input type="submit" value="this will display on your button" onClick="javascript:void(0)">

but if you want it to look like a link you should do this in the css

<style type="text/css">
input{background-color:white;border:0 none;}
</style>

score 0 · Answer 9 · edited Jun 21 '23 at 13:45

0

The submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses Enter while editing a field (e.g. <input type="text">) in a form. The event is not sent to the form when calling the form.submit() method directly. check documentation

edited Jun 21 '23 at 13:45

Alchemist

325
1
17

answered Nov 21 '20 at 09:30

Mamé

59
5

score 0 · Answer 10 · answered Jun 20 '23 at 20:13

You can use onKeyDown in input tag.

Below is the details of it.

const handleKeyDown = (e) => {
   if(e.key === "Enter") {
        //form actions
   }
}

<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
   <input name="paypal_email" type="text" value="whatever" id="email" onKeyDown={handleKeyDown} />
   <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>
</form>

Submit form on Enter key with javascript

10 Answers10

Linked

Related