37

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>
2
  • Which one doesn't work? The enter key, or the button? Commented Dec 10, 2013 at 2:15
  • I found the solution here: stackoverflow.com/questions/29943/… Commented Aug 23, 2015 at 17:28

11 Answers 11

42

Try this:

document.getElementById('email').onkeydown = function(e){
   if(e.keyCode == 13){
     // submit
   }
};
Sign up to request clarification or add additional context in comments.

Comments

19

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>

Comments

11

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

1 Comment

Nice, but beware if you have some kind of javascript validation attached to the "onSubmit" of your form.
11

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.

Comments

4

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"

1 Comment

<input type="submit" style="display: none;" />
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

Comments

1

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>

1 Comment

if you want to do code behind refer below this.Form.DefaultButton = "Button1";
1

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>

Comments

1

Since "keycode" is deprecated, use this:

document.getElementById('element').onkeydown = function (e) {
    if (e.key == 'Enter') {
        
    }
};

Comments

0

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>

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.