javascript - 从单击的表单提交中获取父级 div 的 id

Question

好吧，我在页面上有多个表单，区别在于它们的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>

我使用ajax提交表单，我想要做的是找到已提交表单的框的id。

这是脚本:

<script type="text/javascript">
    $(document).ready(function() {
        $('form').submit(function () {

            $.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:
                        alert($(this).closest('div').attr('id'));
                        //Which returns undefined                        

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

</script>

知道我该怎么做吗？

Answer 1

$(this) 在成功回调中不起作用。 $(this) 是相对的，$(this) 的作用域为成功回调。您需要先分配一个变量，然后在成功回调中使用它

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