Question

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

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')，它也只返回第一个表单。我不知道我做错了什么，或者它是浏览器功能。

Answer 1

您的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>

Answer 2

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

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

Answer 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>

使用jQuery获取选定的表单数据

3 个答案: