使用 jQuery 获取选定的表单数据 [关闭]答案

【问题标题】：Get selected form data using jQuery [closed]使用 jQuery 获取选定的表单数据 [关闭]
【发布时间】：2016-04-15 19:18:39
【问题描述】：

我有一个页面有多个表单的场景，我正在尝试获取正在提交的表单数据。

HTML

<form name="form1">
    <input type="text">
    <input type="button" value="Submit">
<form>
<form name="form2">
    <input type="text">
    <input type="button" value="Submit">
<form>

jQuery

$('[type="button"]').click(function(e){
    e.preventDefault();
    console.log($(this).parent().attr('name'));
});

我总是在控制台中得到 form1。我还在控制台中尝试了jQuery('form')，它也只返回第一个表单。我不知道我做错了什么或者它是浏览器功能。

【问题讨论】：

关闭第一个表单标签

标签： jquery html forms

【解决方案1】：

使用</form> 正确关闭form。使用closest 而不是parent()，如下所示。

$('[type="button"]').click(function(e){
    e.preventDefault();
    console.log($(this).closest('form').attr('name'));
});

【讨论】：

正确使用</form>关闭form。 @kpsingh

【解决方案2】：

您的Form 没有正确关闭，如果您以</form> 正确关闭它，那么您的脚本本身工作正常。

下面改

<form name="form1">
    <input type="text">
    <input type="button" value="Submit">
<form>
<form name="form2">
    <input type="text">
    <input type="button" value="Submit">
<form>

到

<form name="form1">
    <input type="text">
    <input type="button" value="Submit">
</form>
<form name="form2">
    <input type="text">
    <input type="button" value="Submit">
</form>

【讨论】：

这是我的错误。感谢您的帮助

【解决方案3】：

我认为您的主要问题是您的表单标签没有关闭。

下面的完整html示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <form name="form1">
        <input type="text">
        <input type="button" value="Submit">
        </form>
    <form name="form2">
        <input type="text">
        <input type="button" value="Submit">
    </form>
    
    
    <script type="text/javascript">
        $('[type="button"]').click(function (e) {
            e.preventDefault();
            alert($(this).parent().attr('name'));
            console.log($(this).parent().attr('name'));
        });


    </script>
</body>
</html>

【讨论】：