Is there a standard resource for the "default action" of HTML elements?

Question

I'm wondering if there is a defined standard for what the default action is of various HTML elements. I've looked at the W3C's HTML specification and while they are very precise with what attributes can be used with elements (and also some behavioural stuff such as exactly what gets included with form submission) there's nothing about the behaviour of elements. I've also checked out the Mozilla JS reference, and found nothing there either.

In particular I'm looking for the default behaviour of a form submit button; I've seen in different places that its default action is to submit the form and alternatively that its default action is not to submit the form but rather to get focus. Accordingly, there seems to be no consensus on whether onclick="return false;" for a submit button will stop form submission or not.

(Edit for clarity - I'm not trying to do any form-level validation on the submit's onclick or anything like that; if I were, I'd be using the form's onsubmit instead. I really am specifically interested in catching clicks on the button and potentially not having it submit the form in this case. This might end up requiring the button's onclick set some state that the form's onsubmit inspects, but if I can just return false then that's great. Even if not, it would then be critical what order the onsubmit and onclick handlers get fired (i.e. does the button dispatch the submit before running its click handler?) which again I haven't seen specified anywhere.)

While it would be simply to code up a test, I'd rather rely on specs/documented behaviour rather than the results of a trivial test that would undoubtedly miss any subtleties should they exist. In particular, I ran a quick test last week that seemed to show it didn't stop form submission, but running one today shows that it does. I have had no luck finding any sort of authoritative resource as to what browsers actually do when you interact with their elements (e.g. what the default action is, whether the onclick handler for a submit button fires before or after the form submission dispatch, etc.)

Any advice as to where to look in this case would be welcome.

Answer 1

One reason that you may have a hard time to find a spec for this is that you are looking at more than one behavior.

Setting onclick="return false;" will keep the submit button from submitting the form, but it will not keep the form from being submitted. If you press enter when a field in the form has focus, the form itself may be submitted without involving the submit button. (I don't know the exact details, and they may vary a bit from one browser to the next, but you see the principle.)

Answer 2

for that particular scenario, you might want to experiment with different event properties, as browsers act differently, the onlick is for the button, the onsubmit is a form event, so naturally, if you return false for the onclick, that does not mean the on submit is not going to take effect, you should handle the onsubmit separately, or delegate submission to the submit button (by return false onsubmit, and let the onclick handler have form.submit), also try it with multiple submit buttons to understand how it works

I know you might already know this, but some other tips I picked up when dealing with forms, experiment with event.cancelBubble = true, and event.returnValue = false (IE specific, not sure about firefox), sometimes return false is not good enough...

as for documentation, MSDN library documents the default action for all events, here is the documentation for the on submit: http://msdn.microsoft.com/en-us/library/ms535249(VS.85).aspx#

Interestingly: The submit method does not invoke the onsubmit event handler.

which is great, otherwise it would have gone in an infinite loop!

and here is the documentation for the onlcick http://msdn.microsoft.com/en-us/library/ms536913(VS.85).aspx

MSDN library documents all events and objects as well, but for a price, all IE specific!

Answer 3

The relevant documents are DOM3 Events and the HTML 5 specification.

They might not have all information you need, but should. So if you find them lacking, please request those behaviors to be specified.

Answer 4

Yes, you can set up a button-- with a listener, where when the button is clicked, you can stop the submission of the form. The submission of the form is the default behavior for a 'button' of type submit (important) in a form.

The event method, preventDefault (or returnValue=false for the window event, depending on the event model the browser follows), will prevent that default, submission behavior. I also stopPropagation (MSIE evt. model = cancelBubble).

For example, for the following button of type 'submit':

<button type="submit" id="logout" name="logout" value="Log Out">Log Out</button>

Add an x-browser event listener for that particular button. For example, assuming that testlogout is the name of your function that controls what happens when the button is clicked, something like the following might be used to set up the listener:

var logoutBtn = (document.getElementById && document.getElementById('logout')) || 
   (document.all && document.all['logout']) || document.forms[formname].elements['logout'] || null;
if (logoutBtn) {
   if (logoutBtn.addEventListener) {
       logoutBtn.addEventListener('click',testlogout,false);
   } else if (window.attachEvent) {
       logoutBtn.attachEvent('onclick',testlogout);
   } else {
       //legacy:
       logoutBtn.onclick = testlogout;
       //...logic for document.layers support, etc.
   }
}

Then in the testlogout function, which will automatically be passed the event, you would test whatever conditions. Upon the conditions you set, use the event.preventDefault or returnValue, depending again on which the browser supports. These take the place of inline 'return false'. For example:

function testlogout(e) 
{
    e = e || window.event;
    //... your logic here...
    e.stopPropagation?e. stopPropagation():(e.cancelBubble?e.cancelBubble():"");
    e.preventDefault?e.preventDefault():e.returnValue=false;
    return false; // in case all else fails?
}

The event passed has its own set of properties of course, whose names vary, again, depending on the model the browser follows. These properties will identify the target button clicked, for example.

The current event listening models do not pay attention to 'return false'. A 'return false' command will fall on deaf ears, so to speak. But no worries, as long as you use what they do understand.

Hope that helps solve the present, underlying problem. Reading up on DOM Events and event models will clarify the methods and properties available.

Answer 5

why use a Submit button at all? why not just use a button? <input type="button" onclick="function(){if(allCriteriaIsMet()) this.form.submit()}" value="click me"/>

or am I missing something?