Jump to content

OnSubmit versus OnClick... but not the normal question


Recommended Posts

There are lots of form-validation discussions revolving around onsubmit versus onclick. This is not one of them, but it's related.


I noticed something like this:


<form method="post">
   <input type="submit" onclick="return validate_form()">


So there's no "onsubmit" validation for the form, but the button's onclick is calling the function instead. This isn't the recommended way to do this validation, so it is said, because someone can press "enter" in another input field of the form, thus bypassing the "onclick" event of the button.


But that's where my question comes in....

1) I am pressing enter in a text box

2) The "validate_form()" function is getting called anyway!


Why would that be? Is there now built-in logic to some browsers to do this? Any other reason?


Chrome's call stack shows that the onclick handler initiated the call to the function, but I pressed enter in a text box. So why did that handler get called?  (Chrome, IE, all the browsers do this.)


Link to comment
Share on other sites



An activation trigger is a user action or an event which indicates to the implementation that an activation behavior should be initiated. User-initiated activation triggers include clicking a mouse button on an activatable element, pressing the 'Enter' key when an activatable element has focus, or pressing a key that is somehow linked to an activatable element (a hotkey or access key) even when that element does not have focus. [...]


So yes, this is specified as correct DOM behaviour. I'm not sure when it was added, but it also existed in the previous spec (dated 31/05/2011).


Specification doesn't mean it's supported across the board though. Given that there's still people using 11 year old browsers, for the sake of 5 seconds to switch it to the other, correct event, I don't see why you wouldn't.

Link to comment
Share on other sites

From what I can read, namely in this part:

...pressing the 'Enter' key when an activatable element has focus...

Then this is not the specified correct behaviour, as the OP was pressing ENTER when another element had focus.


That said, I just tested with Opera 12.00 and it displayed the same behaviour. More specifically, it seemed to shift the focus to the "submit" button when I pressed enter, thus activating onclick event as per the definition. Don't know if that is specified anywhere though, and I'm afraid I don't have time to read up at the moment.  :(

Link to comment
Share on other sites

Marking as solved because I have enough info. It does seem like more info is needed in general documentation, and/or testing of the order of events. I don't have time to look into these things right now.


But at least I know that it hits onclick because there's a spec for it.

Link to comment
Share on other sites

I wasn't clear from that DOM doc, if both onclick and onsubmit are declared, what gets processed first?


Click will trigger first. When an event is triggered, it propagates up through the DOM tree. So when the click happens, it will be first matched on the input, but will then begin to travel up the DOM tree until it finds the form element with the submit event:




In this 'chain of events', we could bind clicks to any number of elements sitting between the input and form in the tree, and each would be triggered from deepest element up:




Not the bind orders too, they're completely irrelevant in this case.


What I believe the spec I quoted before is saying, is that the events bound to elements further up the DOM tree that could be deemed the same action should trigger the same event(s). So a click on the submit event, fires the same submit event.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.