How can I check if a submit button is clicked and not an enter press on a page?

Question

Imagine this piece of html:

<form>
    <input type="text">
    <input type="submit" id="a">
</form>

and this piece of Javascript

document.getElementById('a').onclick = function (e) {
    alert(e.type);
};

The alert will always say 'click', even if you press enter in the textfield.

How can I check if the button is really clicked?

possible duplicate of [jQuery click event - How to tell if mouse was clicked or enter key was pressed?](http://stackoverflow.com/questions/7394796/jquery-click-event-how-to-tell-if-mouse-was-clicked-or-enter-key-was-pressed) — Chris Gessler, Jun 07 '12 at 11:47
Maybe this will help: [Javascript:Enter key press event][1] [1]: http://stackoverflow.com/questions/905222/javascriptenter-key-press-event — blackwolf, Jun 07 '12 at 11:49
@subirkumarsao I'm creating client-side code for a .Net environment which has a single form element in the entire website, but I need to do something when that precise button is clicked — Jayne Mast, Jun 07 '12 at 11:54
if you inspect the event `(e)` object you will find some alternate properties to evaluate, one of these should prove useful. — luckyape, Nov 17 '20 at 18:19
@luckyape Yes, it was a duplicate of the one that Chris mentioned above. Also, this is more than 8 years old, how did you find it? — Jayne Mast, Nov 19 '20 at 07:55
wow, could not tell you how i ended up on this question, just rando coffee break browsing — luckyape, Nov 19 '20 at 19:28

score 0 · Answer 1 · answered Jun 07 '12 at 11:50

0

Imagine this piece of html:

<form>
    <input type="text">
    <input type="button" id="a">
</form>

and this piece of Javascript

document.getElementById('a').onclick = function (e) {
    this.form.submit();
};

No confusion will be possible.

There is almost no reason to use input type="submit" in modern web applications.

answered Jun 07 '12 at 11:50

Denys Séguret

This isn't semantically correct, buttons are not to be used for submitting forms – Jayne Mast Jun 07 '12 at 11:52
Most things in HTML, CSS, javascript, won't make sense nor allow the building of complex web applications if you see them only as semantic elements. Be practical and keep it simple. Don't forget that in the age of ajax, forms are rarely passive objects just sent to a server. What would be REALLY wrong would be to check in the onClick if the key is an enter... – Denys Séguret Jun 07 '12 at 11:53
@dystroy [Unobtrusive Javascript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) Everybody with disabled Javascript won't be able to use the form/site. – Andreas Jun 07 '12 at 11:56
I don't see them only as semantic elements, but their semantics are a part of what they are. If you completely ignore the semantics you can just as well go back to table-layouts. In my opinion you should use the right elements for the job unless there are no other options. – Jayne Mast Jun 07 '12 at 11:56

1 Answers1