A form's “action” and “onsubmit”: Which execut

问题:

I'm trying to debug a webpage and I see a form element whose opening is

<form name="aspnetForm" method="post" action="default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">

Having only a base knowledge of web forms, I'm wondering what the order of execution is for the action and onsubmit.

回答1:

If action was resolved first, then the browser would leave the page, the JS execution environment would go away, and there would be nowhere to run the JS in onsubmit, so it isn't.

Event handlers run before default actions. They can cancel default actions.

回答2:

The onsubmit must execute first, as returning false from it stops the form being submitted, and thus the action ever being requested.

回答3:

This is explained in the HTML5 spec:

4.10.22.3 Form submission algorithm

When a form element form is submitted from an element submitter (typically a button), optionally with a submitted from submit() method flag set, the user agent must run the following steps:

1. Let form document be the form's Document.

2. If form document has no associated browsing context or its active sandboxing flag set has its sandboxed forms browsing context flag set, then abort these steps without doing anything.

3. Let form browsing context be the browsing context of form document.

4. If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire a simple event named invalid at the form element and then abort these steps.

5. If the submitted from submit() method flag is not set, then fire a simple event that bubbles and is cancelable named submit, at form. If the event's default action is prevented (i.e. if the event is canceled) then abort these steps. Otherwise, continue (effectively the default action is to perform the submission).

6. Let form data set be the result of constructing the form data set for form in the context of submitter.

7. Let action be the submitter element's action.

8. If action is the empty string, let action be the document's address of the form document.

9. Resolve the URL action, relative to the submitter element. If this fails, abort these steps.

10. Let action be the resulting absolute URL.

11. Let action components be the resulting parsed URL.

12. Let scheme be the scheme of the resulting parsed URL.

13. Let enctype be the submitter element's enctype.

14. Let method be the submitter element's method.

15. Let target be the submitter element's target.

16. If the user indicated a specific browsing context to use when submitting the form, then let target browsing context be that browsing context. Otherwise, apply the rules for choosing a browsing context given a browsing context name using target as the name and form browsing context as the context in which the algorithm is executed, and let target browsing context be the resulting browsing context.

17. If target browsing context was created in the previous step, or, alternatively, if the form document has not yet completely loaded and the submitted from submit() method flag is set, then let replace be true. Otherwise, let it be false.

18. Otherwise, select the appropriate row in the table below based on the value of scheme as given by the first cell of each row. Then, select the appropriate cell on that row based on the value of method as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.

               |        GET        |         POST
    -------------------------------------------------------
    http       | Mutate action URL | Submit as entity body
    https      | Mutate action URL | Submit as entity body
    ftp        | Get action URL    | Get action URL
    javascript | Get action URL    | Get action URL
    data       | Get action URL    | Post to data:
    mailto     | Mail with headers | Mail as body
    

    If scheme is not one of those listed in this table, then the behavior is not defined by this specification. User agents should, in the absence of another specification defining this, act in a manner analogous to that defined in this specification for similar schemes.

Therefore, at step 5, the submit is fired, and can be canceled to prevent form submission. The action is resolved after that.

回答4:

onsubmit is executed first in order to check the format etc. Then action is executed to get/post the data to the backend.