jQuery 从我提交的表单中获取表单名称答案

【问题标题】：jQuery get the form name from the form i'm submittingjQuery 从我提交的表单中获取表单名称
【发布时间】：2021-05-06 01:13:42
【问题描述】：

我正在尝试编写一个 jQuery 代码，用于发送我从任何 html 页面提交的 formData 的序列化。但是如果一个 html 页面中有多个表单呢？我怎么知道我提交的是什么表格？我正在尝试记录我将在任何 html 页面上执行的活动，因此在不更改 html 代码的情况下，如何在包含多个表单的网页上获取特定表单的表单数据。

$( "*",document.body ).submit(function( event ) {   
  console.log( $( this ).serializeArray() );  
  event.preventDefault();
});

这是我编写的函数，但它可以在任何提交的表单上运行，而无需知道它是哪一个。

【问题讨论】：

this.name 是当前表单的名称。
正如 Richard 和 Barmar 所说，有 id 和 name，但您可以创建一个完全有效的表单，而这两者都没有。如果您完全通过 javascript 处理表单提交，您甚至不需要 action 或 method 属性。如果您不是构建表单的人，那么您需要声明需要一个 ID 或名称，或者在您的架构中说明这一点。

标签： javascript html jquery

【解决方案1】：

您可以使用此关键字访问所有属性表单，代表当前提交的表单

例如通过 id 、 name ... 来识别您的表单，为每个表单添加一个 id 然后使用

javascript => this.name 或 jQuery => $(this).attr('name')

参见下面的sn-p：

$( "*",document.body ).submit(function( event ) {   
  console.clear();
  console.log("form id =",$(this).attr("id"));
  console.log("form name =",$(this).attr("name"));
  // or console.log("form id =", this.id);
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myFirstForm" id="one">
  <input name="one" type="text" value="text1" />
</form>

<form name="mySecondForm" id="two">
  <input name="two" type="text" value="text2" />
</form>

<form name="myThirdForm" id="three">
  <input name="three" type="text" value="text3" />
</form>

【讨论】：

【解决方案2】：

您可以使用id 属性，因此您可以使用$('#id') 选择每个表单，并且您可以通过 JavaScript 添加该属性，而无需弄乱 HTML 本身。正如Barmar 之前所说，使用this.name 可以为您提供当前表单的名称，因此您可以迭代页面中的所有表单，并访问每个表单的名称（以及其他属性），这种方式您可以更好地控制您需要对每个表单执行的操作。

【讨论】：