一个表单的"action"和"onsubmit"：哪个先执行？

Question

我想要调试一个网页，我看到一个表单元素，它的开头是

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

我的 web form 知识只是基础水平，我想知道 action 和 onsubmit 的执行顺序是什么。

- Not John Skeet

---

"javascript:" 在 onsubmit 中是无用的。 - epascarello

Answer 1

如果先解决action，那么浏览器将离开页面，JS执行环境也会消失，并且没有地方运行onsubmit中的JS代码，因此不会这样做。

事件处理程序在默认操作之前运行。它们可以取消默认操作。

- Quentin

Answer 2

onsubmit必须首先执行，因为如果在此函数中返回false，则会阻止表单提交，因此action将永远不会被请求。

- Jamiec

Answer 3

这在HTML5规范中有解释：

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.

因此，在第5步，触发submit，可以取消以防止表单提交。此后解析操作完成。

- Oriol

Answer 4

onsubmit 首先被执行以检查格式等。然后 action 被执行以将数据发送到后端。

- Searene

---

如果表单有效且操作正确，则onsubmit永远不会被调用。 - srikanth_yarram