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

I am wondering if there is a specific standard for the default action of various HTML elements. I looked at the W3C HTML specification , and although they are very precise with which attributes the elements can be used (as well as some behavioral things, such as exactly what goes into the form feed), there is nothing about the behavior of the elements. I also checked the Mozilla JS link and found nothing.

In particular, I am looking for the default behavior of the submit button of a form; I have seen in various places that its default action is to submit the form and, alternatively, its default action should not represent the form, but rather get focus. Accordingly, there seems to be no consensus as to whether onclick="return false;" for the submit button, stop submitting the form or not.

(Edit for clarity - I am not trying to perform form-level validation in submit onclick or something like that, if I were, I would use the onsubmit form. Especially interested in catching clicks on a button and maybe not provided that he will submit the form in this onsubmit may cause the onclick button to set some state that the onsubmit form will check, but if I can just return false , then even if it isn’t, then it would be important which order treated handlers onsubmit and onclick (i.e., sends a sending button before starting communication it clicks handler?), which I have not seen anywhere else.)

While it would be easy to program the test, I would rather rely on the specifications / documentary behavior rather than on the results of a trivial test, which would undoubtedly miss any subtleties if they existed. In particular, last week I conducted a quick test, which seemed to show that he did not stop submitting the form, but the launch today shows that this is so. I was not lucky to find any authoritative resource regarding what browsers really do when you interact with your elements (for example, what is the default action, does the onclick handler for the submit button work before or after submitting a form request, etc. .)

Any advice on where to look in this case is welcome.

+3
source share
5 answers

Relevant DOM3 Events documents and HTML 5 specification .

They may not have all the necessary information, but they need it. Therefore, if you are missing them, please request the indicated types of behavior .

+1
source

Yes, you can configure the button - with a listener, where when you press the button you can stop the form submission. Form view is the default behavior for a button 'type submit (important) in the form.

The event method, preventDefault (or returnValue = false for the window event, depending on the event model the browser follows) will prevent this default behavior, sending behavior. I also stop programming (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 this particular button. For example, assuming testlogout is the name of your function that controls what happens when the button is clicked, the following can be used to configure 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 pass the event, you check all the conditions. According to your conditions, use event.preventDefault or returnValue, depending on what the browser supports. They replace inline ' return false . For instance:

 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 past event has its own set of properties, of course, whose names change, again, depending on the model that the browser follows. These properties, for example, identify the pressed target button.

Listening models of the current event do not pay attention to "return false". For example, the command "return false" will be omitted, so to speak. But do not worry while you use what they understand.

Hope this helps solve the real underlying problem. Reading on DOM events and event models will refine the available methods and properties.

+1
source

One reason you might find it difficult to find a specification for this is because you are looking at several different actions.

Setting onclick="return false;" will cause the submit button to submit the form, but it will not save the form. If you press the enter button when the field in the form has focus, the form itself can be submitted without involving the submit button. (I don’t know the exact details, and they may differ slightly from one browser to another, but you see the principle.)

0
source

for this particular scenario, you can experiment with different properties of the event, since browsers act differently, onlick for a button, onsubmit is a form event, so naturally, if you return false for onclick, which does not mean that on submit does not takes effect, you must process onsubmit separately or delegate the feed to the submit button (by returning false onsubmit and allow the onclick form.submit handler), and also try it with a few submit buttons to understand how this works.

I know that you already know this, but some other tips that I chose when working with forms, experiment with event.cancelBubble = true and event.returnValue = false (IE is specific, not sure about firefox), sometimes returns false not good enough ...

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

Interesting: the submit method does not call the onsubmit event handler.

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

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

The MSDN library also documents all events and objects, but at a price, all specific to IE!

0
source

why use the 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?

0
source

Source: https://habr.com/ru/post/1400395/


All Articles