HTML Form - Execute script when pressing 'Enter', without submitting

Question

Possible Duplicate:
jQuery Event Keypress: Which key was pressed?

OK, here's my situation (I've solved this issue in the past, but since I'm not sure my approach was the best, I'm all ears for some advice) :

I've got a simple HTML form
The purpose of this form is NOT to be submitted EVER
The user normal clicks the (pseudo)Submit button, and the desired action is executed (via Javascript/Ajax, etc)

The thing is :

If the user hits enter, then the form is submitted, something we definitely DON'T WANT.
What we want is to catch that particular keypress, and in that case, trigger the action that would normally be executed if the button was clicked.

How would you go about this?

My Approach

The Form

<form id="someId" action="#" method="post" 
      onsubmit="return false;" onkeypress="return enterSub(this,event);">
...
</form>

The Code

function enterSub(inField, e) 
{ 
        var charCode;

        if(e && e.which)
        {
            charCode = e.which;
        }
        else if (window.event)
        {
            e = window.event;
            charCode = e.keyCode;
        }

        if (charCode == 13) 
        {
            performThatAction; // My Main action
        }
 }

[this might help](http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) — 000, Aug 21 '12 at 05:23

score 5 · Accepted Answer · answered Aug 21 '12 at 05:20

5

Bind to the submit of the form rather than the click of a button, then prevent the default action.

$("#myform").submit(function(e){
    e.preventDefault();
    alert("The action has occurred without submitting the form!");
});

answered Aug 21 '12 at 05:20

Kevin B

94,570
16
163
180

Seems pretty straightforward and brilliantly efficient. Give me a minute and I'll let you know how it went... :-) – Dr.Kameleon Aug 21 '12 at 05:23

score 2 · Answer 2 · edited Aug 21 '12 at 05:21

2

$('#form_id').submit(function(){
  //do something
});

This function will trigger whenever user tries to submit the form (you will have to return false or prevent default)

edited Aug 21 '12 at 05:21

Kevin B

94,570
16
163
180

answered Aug 21 '12 at 05:20

orhanhenrik

1,407
8
11

score 2 · Answer 3 · answered Aug 21 '12 at 05:24

2

If you also would like to do something specific when users hit Enter, you could do something like:

$(document).keypress(function(e) {
        if(e.which == 13) {
           e.preventDefault();
           // Do something         
        }
    });

answered Aug 21 '12 at 05:24

NewInTheBusiness

1,465
1
9
14

score 1 · Answer 4 · answered Aug 21 '12 at 05:28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
document.attachEvent("onkeydown", win_onkeydown_handler);
function win_onkeydown_handler()
{
alert(event.keyCode);
switch (event.keyCode){
case 13 : // 'enter'
event.returnValue = false;
event.keyCode = 0;
alert("Enter Blocked");// If need show this alert else comment it
break;

}
}
</script>
<BODY>
</BODY>
</HTML>

Please use the above script to find enter key press u can handle the enter as u needed.Hope ur doubt as solved else please post me.

HTML Form - Execute script when pressing 'Enter', without submitting

My Approach

4 Answers4