Submit buttons and Enter key issues

Question

I'm trying to prevent form submit if users has focus on any submit button or input type text (as in a filtering datagrid).

I'm considering 2 options

replace submit button with some kind of <p onclick='submitform&parameters'>Add</p>
block the enter key on buttons and some preferred input fields

Is there a better way to do this?

why? people expect the enter key to submit a form, especially when a button is focused. are you attaching other behaviour to the buttons? — Patricia, Nov 15 '11 at 19:05
you've got a point, but i want to explicitly prevent this on some pages — cristi _b, Nov 15 '11 at 19:08
the right keyword combination reveals nice links to the same question :( http://stackoverflow.com/questions/1567644/submit-form-problem-enter-key, will reply if that helped — cristi _b, Nov 15 '11 at 19:09
it did help, question closed, thanks for sharing your opinion Patricia — cristi _b, Nov 15 '11 at 19:14
you should post your solution as the answer. even if it is just that that question is the answer. — Patricia, Nov 15 '11 at 19:16

Chris Baker · Answer 1 · 2011-11-17T17:06:33.747

If you add an onKeyPress event to the element in question, you can prevent the default action (form submission) by returning false from the function:

<input id="txt" type="text" onKeyPress="var key = event.keyCode || event.which; if (key == 13) return false;"></input>

Note that the which property of the keyboard event is deprecated, but you'll still want to check for it to support older user agents and/or Internet Exploder (reference).

If you don't want to use inline javascript (which is not recommended), you can instead attach an event. Also, it may be better to use the preventDefault (docs) method of the event object, as well as the stopPropagation method (docs) - the necessity for these methods this is highly dependent on what other events you have attached to the form or the elements:

var preventFormSubmit = function (event) {
    var key = event.keyCode || event.which;
    if (key != 13)
        return;
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true; // deprecated, for older IE
    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false; // deprecated, for older IE
    return false;
};  
var target = document.getElementById('txt');
if (typeof target.addEventListener == 'function')
    target.addEventListener('keypress', preventFormSubmit, false);
else if (typeof target.attachEvent == 'function')
    target.attachEvent('onkeypress', preventFormSubmit);

There are other approaches to use, such as attaching a more complex onSumit handler to the form itself - this may be more appropriate if you're going to be doing further manipulation of the form or data before submitting (or using AJAX to submit the form data).

great explanation, but the scope of this fix was simply for IE7+, FF and Chrome, for an intranet website, this fix is satisfactory, for something more advanced, I see your point and thank you for sharing your thoughts — cristi _b, Nov 17 '11 at 20:55

score 0 · Accepted Answer · answered Nov 17 '11 at 16:25

0

Solution

input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

Link

http://stackoverflow.com/questions/1567644/submit-form-problem-enter-key

Question closed

answered Nov 17 '11 at 16:25

cristi _b

1,783
2
28
43

Submit buttons and Enter key issues

2 Answers2