javascript这个表单相当于jquery表单答案

【问题标题】：Javascript this form equivalent to jquery formjavascript这个表单相当于jquery表单
【发布时间】：2016-07-22 09:43:19
【问题描述】：

我在原生 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?
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

你可以用这个：

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

可以理解为#submit按钮在表单内部，所以你必须在DOM树中用.closest()向上遍历才能得到表单。

如果你需要一个来自 jquery 代码的原生 DOM 节点，你可以在这里附加[0]：

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

【讨论】：

【解决方案2】：

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

How to add a button dynamically using jquery

【讨论】：

【解决方案3】：

这里也值得注意：

jquery/js -- How do I select the parent form based on which submit button is clicked?

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

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

【讨论】：

【解决方案4】：

要根据其中的元素获取表单，您可以使用 element.form ：

$('#submit').click(function(e){
    e.preventDefault();

    console.log(this.form);
});

e : 代表我们为什么使用e.preventDefault(); 的事件，所以它会阻止默认事件。

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

希望这会有所帮助。

【讨论】：