表格"动作"和" onsubmit":哪个先执行?

时间:2015-03-12 16:00:00

标签: javascript html forms post

我正在尝试调试网页,我看到一个表单元素,其开头是

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

仅具备网络form的基本知识,我想知道actiononsubmit的执行顺序是什么。

4 个答案:

答案 0 :(得分:20)

如果首先解析action,那么浏览器将离开页面,JS执行环境将消失,并且无法在onsubmit中运行JS,因此它不是

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

答案 1 :(得分:9)

onsubmit 必须首先执行,因为从中返回false会停止正在提交的表单,因此action也会被请求。

答案 2 :(得分:9)

HTML5规范中解释了这一点:

  

4.10.22.3 Form submission algorithm

     

从元素提交 元素 时   提交者(通常是一个按钮),可选择通过设置form方法标志提交,用户代理必须运行   以下步骤:

     
      
  1. 表单文档表单&#39; submit()

  2.   
  3. 如果表单文档没有关联的Document或其browsing context设置了active sandboxing flag set,则在不执行任何操作的情况下中止这些步骤。

  4.   
  5. 表单浏览上下文成为表单文档的<{3}}

  6.   
  7. 如果未设置从sandboxed forms browsing context flag方法标记提交的,并且提交者元素的browsing context为false , 然后   {em>形式submit()并检查   结果:如果结果是否定的(约束验证结束   有无效的字段,可能通知用户这个)   然后在表单元素中no-validate state命名为invalid   然后中止这些步骤。

  8.   
  9. 如果未设置从interactively validate the constraints方法标记提交的,则fire a simple event冒泡且可取消命名   {em>形式的submit 。如果阻止了事件的默认操作(即   如果事件被取消)则中止这些步骤。否则,继续   (实际上,默认操作是执行提交)。

  10.   
  11. 表单数据集成为提交者上下文中表单submit()的结果。

  12.   
  13. 操作成为提交者元素&#39; fire a simple event

  14.   
  15. 如果操作是空字符串,请让操作表单文档constructing the form data set

  16.   
  17. action网址操作,相对于提交者元素。如果失败,请中止这些步骤。

  18.   
  19. 操作成为结果the document's address

  20.   
  21. 操作组件成为生成的Resolve

  22.   
  23. 计划为结果absolute URLparsed URL

  24.   
  25. enctype 成为提交者元素&#39; scheme

  26.   
  27. 方法成为提交者元素&#39; parsed URL

  28.   
  29. target 成为提交者元素enctype

  30.   
  31. 如果用户在提交表单时指出了要使用的特定method,那么让目标浏览上下文为   target。否则,请使用目标作为browsing context   名称和表单浏览上下文作为其中的上下文   执行算法,让目标浏览上下文成为   结果browsing context

  32.   
  33. 如果在上一步中创建了目标浏览上下文,或者,如果表单文档尚未the rules for choosing a browsing context given a browsing context name且< em>从browsing context方法标志提交的是   设置,然后让替换为真。否则,就是假的。

  34.   
  35. 否则,根据每行第一个单元格给出的 scheme 的值,选择下表中的相应行。然后,   根据 method 的值选择该行上的相应单元格   在每列的第一个单元格中给出。然后,跳到步骤   在该单元格中命名并在表格下方定义。

         
               |        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
    
         

    如果 scheme 不是此表中列出的那个之一,则此规范未定义该行为。用户代理应该在   缺乏另一个定义此规范的规范,以某种方式行事   类似于本规范中针对类似方案所定义的内容。

  36.   

因此,在步骤5中,submit被触发,可以取消以防止表单提交。之后行动就解决了。

答案 3 :(得分:0)

首先执行

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