Catching form onSubmit vs catching Enter key?

Question

I have a page that involves a textbox and a button, with JavaScript functionality that triggers when a user clicks on the button. I'd like the functionality to also be triggered when the user presses the Enter key.

What I'm not sure about is whether to make the two inputs into a form and use "return functionname()" in the onSubmit attribute, or to capture pressing the Enter key in the textbox. My gut instinct is to use a form and onSubmit, which has the advantage of handling unique submission methods on the browser level, but I'm not sure if there are any standards/best practices that discourage that.

That is:

<form id="myform" onsubmit="return myFunction()">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go">
</form>

vs

<input type="text" id="mytextbox" onkeypress="myFunction()">
<input type="button" id="mysubmit" value="Go" onclick="myFunction()">

There is no default functionality on hitting enter to submit a form. You have to do that manually when ever enter key is pressed. And thus you can have your javascript functionality in onSubmit. — Shailesh Saxena, Feb 12 '14 at 05:23

score 2 · Accepted Answer · answered Feb 12 '14 at 05:55

My gut instinct is to use a form and onSubmit

sounds like your gut is in tune with common practice. ;-)

which has the advantage of handling unique submission methods on the browser level

Which makes it robust and reliable, perhaps explaining why it is common practice.

but I'm not sure if there are any standards/best practices that discourage that.

Certainly no official standards either way (but it's not their job to do that either). "Best" is a relative term based on criteria for making comparisons. If your criteria include things like: robustness, ubuiquitous support, ease of maintenance and simplicity then putting a submit listener on the form will likely rank very highly.

PS: For a form control to be successful (i.e. for its value to be submitted with the form), it must have a name. An ID is optional (and usually not required).

score 0 · Answer 2 · answered Feb 12 '14 at 05:38

0

Here is the solution, you are looking for

$(document).ready(function(){
    $('#mytextbox').keypress(function(ev){
      //If user pressed Enter Key then trigger Submit click
      if(ev.keyCode==13)
      $('#mysubmit').click();
    });
});

answered Feb 12 '14 at 05:38

MRaja

1

1

The fastest way to a downvote is to give a jQuery answer when there's no jQuery tag on the question or mention in the OP. I this case, it is also irrelevant. The poster wants to know a strategy, not implementation. – RobG Feb 12 '14 at 05:43
I appreciate the response, but I'm looking for clarification on best implementation method, not the actual code. Also, I'd be more inclined to use `$("#myform").submit()` instead of `$('#mysubmit').click();`. – Hydrothermal Feb 12 '14 at 05:49
As per my knoledge, best way is you can set button as default submit so that when user press Enter key automatically default button will be triggered. Here is the reference to set default button http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined – MRaja Feb 12 '14 at 07:41
@MRaja—there is no script at all required for that, it is the default behaviour in all browsers in use. The OP wasn't "how do I submit a form when enter is pressed" but "what is the best strategy for attaching a submit listener". Pressing enter was an exmample of the different ways a submit event can be triggered by a user. – RobG Feb 12 '14 at 22:45

score 0 · Answer 3 · answered Feb 12 '14 at 05:39

there are two standard ways todo it: as you mention like this:

<form id="myform" onsubmit="return myFunction()">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go">
</form>

And also

<form id="myform">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go" onclick="return myFunction()">
</form>

Catching form onSubmit vs catching Enter key?

3 Answers3