Develop Reference

form should not submit on enter if focus is not on submit button

I have a requirement where user cannot submit the form if he press enter key unless focus will be on submit button.
Using following code, I am able to do that, but now the issue is, if I have any enter key event attached specific to any field (e.g. if I want to attach enter key event to one textfield for some special requirement), it is not allowing me due to the script I have written below..
<script>
$(document).keydown(function(event) {
if (event.keyCode == 13) {
var $focusedItem = $(document.activeElement);
if($focusedItem.is("button") || $focusedItem.is("a") || $focusedItem.attr("type") == "submit") {
$focusedItem.click();
}
else {
event.preventDefault();
}
}
});
</script>
Any solution where I can restrict user from submitting form on pressing enter key, if focus is not on the submit button but at the same time if there will be any enter key event attached to any form-field, that should also work.

If you had created a JsFiddle it would be easier to help. However, I'm thinking you should do something like this:
if($focusedItem.attr('id') == 'submitButton') {
if (event.keyCode == 13) {
submit the form
}
}else if ($focusedItem.attr('id') == 'Anothertextarea') {
if (event.keyCode == 13) {
do something special
}
}else{
if (event.keyCode == 13) {
return null;
}
}

Remove the line event.stopPropagation(); from your script, you need only the preventDefault() (prevents the submit).
When you do stopPropagation() you are stopping all other keypress events on the element.

Try that and see if it fits your needs:
--DEMO--
$(document).on('submit', 'form', function (e) {
e.preventDefault();
}).on('click', ':submit', function (e) {
if (!$(document.activeElement).is(':submit')) return;
var form = $(this).closest('form').length ? $(this).closest('form')[0] : $('#' + $(this).attr('form'))[0];
form.submit();
});

Maybe I'm missing the point, this is basically a standard html issue.
Don't give the form an submit action (move it to a click event directly on the button) and change all button types to button instead of submit.
I can't remember if simply removing the submit from the form is enough. If not then just do onSubmit="return false;" I think that does it.
However as a note the requirement for this as a global behavior is probably wrong and if its for the government then you will probably get in trouble since its not compliant with accessibility guidelines.

How to prevent postback while pressing enter key from inside html input textbox?

Am using html input textbox in .aspx page, when i change values in that textbox and hit enter key means page get postback. How to prevent this postback other than returning false in "onkeypress" event.
Code:
textBox[0].setAttribute("onkeydown", "return (event.keyCode!=13);");
Thanks,
Karthik.

You need to use javascript to prevent the default behaviour of clicking enter, which is to submit the form. You need to do something like this (and I'm using jQuery here, which is included by default with an ASP.Net app):
$('input[type="text"]').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});

How to put focus on a textbox?

How do I put focus on a textbox with JavaScript(Or jQuery)?
I have a textbox on a page and after the user presses the enter key, the textbox loses focus. (Keep in mind that no post occurs, the page does not refresh)
I want to be able set the focus back inside of the textbox through javascript so that the user can continue typing and doesn't have to click on anything.
I tried adding the following code after the users has pressed the enter key:
$(".focus").focus();
The code for my textbox:
<input type="text" class="focus" />
but alas, the cursor does not appear inside of the textbox and the user still has to click to continue typing.
How do I fix this problem?

You have to apply the focus code to the input, if the page hasn't loaded or the DOM isn't ready when the code runs, then there's no input yet to focus on..
So you have to check that the DOM is loaded, like this:
$(function(){
$(".focus").focus();
});
http://jsfiddle.net/c7aUS/
You can also include the code at the bottom of the page, before the </body> tag, so that it loads right after all your HTML.
note: If you're running this in jsfiddle, by default your code is run on page load. When using JQuery, it automatically wraps it in this code:
$(window).load(function(){
//your code here
});
EDIT:
In that case, meetamit is very helpful, I think you're looking for this:
$(function(){
$(".focus").focus();
$(".focus").on('keydown', function(event) {
if(event.which == 13) {// Enter key pressed
$this = $(this);
$this.focus();
var value = $this.val();
$this.val(''); /* clear the field */
// do stuff with the value
}
});
});​
http://jsfiddle.net/c7aUS/1/

Why does pressing the enter key take away the focus from the field? (I couldn't reproduce it.) It might suggest that there's a hidden problem still. Maybe not. If not, this might help:
$(".focus").on('keydown', function(event) {
if(event.which == 13) {// Enter key pressed
event.preventDefault();
}
});
​

know the suggestion is opened

I have a html form with no submit button. I want to submit that form upon hitting ENTER button. I used a simple jquery code to submit the form upon hitting ENTER.
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
$(this).parents('form').submit();
}
});
But there is a problem with this code. When i type in text field and want to select a suggestion (these are the suggestions, suggested by browser based on the history for that field) for that field using "ENTER" key it trigger the submit of the current form. I want to skip this as well.
Is there something like in jquery or javascript
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
if(! $(this).is('suggestOpened')) // i want something like this
{
// submit the form
}
}
});
Thanks in advance.

No, there's no such event. You could play with onchange and onblur events to intercept whether the user is filling a particular field, but anyway without a submit button:
There's no way for the user to figure-out how to submit the form
The same action (enter key press) could lead to two different actions, which breaks UI consistency
IMHO you should definitely place a submit button.

Submitting forms on enter/return when using anchors as submit-input

I'm using anchors to submit forms:
$("a[title=submit]").click( function(){
$(this).parents("form").submit();
});
It works very well, however I still want the user to be able to submit the form when pressing enter or return.
Anyone know how to do this?

$("form").bind("keypress", function(e){
if(e.keyCode == 13){
$(this).submit();
}
});

You should be able to do that by default. If you have an onsubmit for the form make sure it returns true, otherwise returning false will prevent the form from submitting normally.
Unless your submit function is doing something funky it shouldn't block the user from submitting by pressing enter inside a field.