Javascript这个表单相当于jquery表单

Javascript this form equivalent to jquery form

本文关键字：表单 相当于 jquery Javascript      更新时间：2023-09-26

我在原生JS 中有这个

<button id="submit" onclick="javascript:validateForm(this.form);return false;">Submit</button>

我如何在jquery中做到这一点？我试过

$('#submit').click(function(e){
    e.preventDefault();
    console.log(e.form) // I got undefined?
});

在代码中，e是绑定在#submit按钮上的事件，它是一个称为事件对象的对象。它有几个属性，但没有形式。所以，

你可以使用这个：

$('#submit').click(function(e){
    e.preventDefault();
    var form = $(this).closest('form'); // <----gets you the form
    console.log(form) // I got undefined?
});

可以理解为#submit按钮在表单中，因此，您必须使用.closest()在DOM树中遍历才能获得表单。

如果您需要从jquery代码中获得本机DOM节点，则可以在此处附加[0]：

var form = $(this).closest('form')[0]; // <----gets you the native DOM node of form

使用表达式，您可以尝试选择一个id为"submit"的现有DOM元素。你可以看看这篇文章，我认为它回答了你的问题，它向你展示了如何使用jQuery:动态创建按钮

如何使用jquery 动态添加按钮

同样值得注意的是：

jquery/js——如何根据单击的提交按钮来选择父窗体？

然而，通常最好将事件附加到表单本身的提交事件，因为即使在提交时按下其中一个字段的回车键也会触发：

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

要根据表单中的元素获取表单，只需使用element.form:

$('#submit').click(function(e){
    e.preventDefault();
    console.log(this.form);
});

e:表示我们为什么使用e.preventDefault();的事件，因此它将阻止默认事件。

this:表示当前点击的元素submit，这就是为什么我们可以使用this.form来获取父窗体。

希望这能有所帮助。

相关文章：