Javascript 从单击的表单提交中获取父div的id

好的，我在页面上有多个表单，不同的是它们的

id

，而且每个表单都有一个父框，所有这些表单都有不同的

id

其中一个框的html：

<div class="center-block" id="box2">
    <form action="/login" id="form2" method="post" novalidate="novalidate">
        <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="2">
        <input id="Name" name="Name" type="hidden">
        <input type="submit" value="Submit">
    </form>
</div>

---

知道我该怎么做吗？

只需使用JQuery方法：

alert($(this).parent().attr('id'));

另外，正如其他人指出的，您有一个不同的问题，即在成功回调中使用

this

时，它没有指向

表单。您应该缓存该值，然后使用cache变量。你可以在我的JavaScript中阅读更多关于这个

是如何工作的

$(document).ready(function() {
    $('form').submit(function () {
        // Cache the object that "this" is bound to because
        // in the success function, the invocation context 
        // changes and "this" won't point to the same object 
        // it does now.
        var theForm = this;
        $.ajax({
            url: $(this).data('url'),
            type: 'POST',
            data: $(this).serialize(),
            success: function (data) {
                if (data !== "0") {
                    window.location.href = data;
                } else {
                    //Just use the JQuery parent() method with the cached object
                    $(theForm).parent().attr('id')


                }
            },
            error: function () {
                alert("No idea what went wrong");
            }
        });
        return false;
    });
});

---

只需使用JQuery方法：

alert($(this).parent().attr('id'));

另外，正如其他人指出的，您有一个不同的问题，即在成功回调中使用

this

时，它没有指向

表单。您应该缓存该值，然后使用cache变量。你可以在我的JavaScript中阅读更多关于这个

是如何工作的

$(document).ready(function() {
    $('form').submit(function () {
        // Cache the object that "this" is bound to because
        // in the success function, the invocation context 
        // changes and "this" won't point to the same object 
        // it does now.
        var theForm = this;
        $.ajax({
            url: $(this).data('url'),
            type: 'POST',
            data: $(this).serialize(),
            success: function (data) {
                if (data !== "0") {
                    window.location.href = data;
                } else {
                    //Just use the JQuery parent() method with the cached object
                    $(theForm).parent().attr('id')


                }
            },
            error: function () {
                alert("No idea what went wrong");
            }
        });
        return false;
    });
});

$（此）

在成功回调中不起作用<代码>$（此）是相对的，

$（此）

的范围将是成功回调的范围。您需要首先分配一个变量，然后在成功回调中使用它

<script type="text/javascript">
    $(document).ready(function() {
        $('form').submit(function () {
            var curr_form = $(this);
            $.ajax({
                url: $(this).data('url'),
                type: 'POST',
                data: $(this).serialize(),
                success: function (data) {
                    if (data !== "0") {
                        window.location.href = data;
                    } else {
                        //Here I would like to alert the id of the parent box.
                        //Something like this:
                        curr_form.closest('div').attr('id')
                        //Which returns undefined                        

                    }
                },
                error: function () {
                    alert("No idea what went wrong");
                }
            });
            return false;
        });
    });

</script>

$（文档）.ready（函数（）{
$（'form'）。提交（函数（）{
var curr_form=$（本）；
$.ajax({
url:$（this）.data（'url'），
键入：“POST”，
数据：$（this）.serialize（），
成功：功能（数据）{
如果（数据！=“0”）{
window.location.href=数据；
}否则{
//在这里，我想提醒父框的id。
//大概是这样的：
当前格式最近（'div'）.attr（'id'））
//返回未定义的
}
},
错误：函数（）{
警惕（“不知道出了什么问题”）；
}
});
返回false；
});
});

$（此）

在成功回调中不起作用<代码>$（此）是相对的，

$（此）

的范围将是成功回调的范围。您需要首先分配一个变量，然后在成功回调中使用它

<script type="text/javascript">
    $(document).ready(function() {
        $('form').submit(function () {
            var curr_form = $(this);
            $.ajax({
                url: $(this).data('url'),
                type: 'POST',
                data: $(this).serialize(),
                success: function (data) {
                    if (data !== "0") {
                        window.location.href = data;
                    } else {
                        //Here I would like to alert the id of the parent box.
                        //Something like this:
                        curr_form.closest('div').attr('id')
                        //Which returns undefined                        

                    }
                },
                error: function () {
                    alert("No idea what went wrong");
                }
            });
            return false;
        });
    });

</script>

$（文档）.ready（函数（）{
$（'form'）。提交（函数（）{
var curr_form=$（本）；
$.ajax({
url:$（this）.data（'url'），
键入：“POST”，
数据：$（this）.serialize（），
成功：功能（数据）{
如果（数据！=“0”）{
window.location.href=数据；
}否则{
//在这里，我想提醒父框的id。
//大概是这样的：
当前格式最近（'div'）.attr（'id'））
//返回未定义的
}
},
错误：函数（）{
警惕（“不知道出了什么问题”）；
}
});
返回false；
});
});
$（this）.parent（'div'）.prop（'id'）“这”是成功函数。您必须将事件中的“this”保存到变量中。您需要掌握javascript的
$（this）.parent（'div'）.prop（'id'）“这”是成功函数。您必须将事件中的“this”保存到一个变量中。您需要掌握javascript的尚未定义：/感谢您的解释，我为什么要在
上使用
.parent
呢
parent（）
完全符合您的要求，而
closest（）
允许您搜索与某个选择器匹配的“祖先”。仍然未定义：/that's undefined:/感谢您的解释，我为什么要使用
.parent
而不是
。closest
？@m\u bale，
parent
方法比
closest
@m_-bale两者都能起作用的方法更有效
parent（）
正是您想要的，而
closest（）
允许您搜索与特定选择器匹配的“祖先”。很好！非常感谢。你能解释一下它现在是如何工作的吗？@m_bale在成功回调中，
$（this）
指的是ajax的对象，而不是它绑定到的表单的
$（this）
。很好！非常感谢。你能解释一下它现在是如何工作的吗？@m_bale在成功回调中，
$（this）
指的是ajax的对象，而不是它绑定到的表单的
$（this）
。