Get id of parent div from clicked form submit

Question

Okay so I have multiple forms on the page, the difference is their id, also each one has a parent box, all of which also have a different id.

The html of one of the box:

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

I submit the forms with ajax, and what I want to do is find the id of the box that had its form submitted.

This is the script:

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

Any idea how I would do that?

"this" is the success function. you have to save "this" from the event into a variable. — Djaevel, May 19 '17 at 17:14
You need to master javascript's [this](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this) — Roamer-1888, May 19 '17 at 17:30

score 5 · Answer 1 · answered May 19 '17 at 17:15

$(this) won't work in success callback. $(this) is relative, the scope of $(this) will be of success callback. You need to assign a variable first & then use it in success callback

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

Nice! Thank you! Can you somehow explain to me how it now works? — m_bale, May 19 '17 at 17:18
@m_bale Inside the success callback, `$(this)` refers to the object of the ajax, not the form's `$(this)` which it was bound to. — Agam Banga, May 19 '17 at 17:21

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Just use the JQuery parent() method:

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

Also, as others have pointed out, you have a different issue in that this isn't pointing to the form when you use it in the success callback. You should cache that value and then use the cache variable. You can read more about how this works in JavaScript in another post of mine.

$(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;
    });
});

Thanks for the explanation, any reason why I should use `.parent` over `.closest`? — m_bale, May 19 '17 at 17:26
@m_bale Both can work. `parent()` does exactly what you are looking for, while `closest()` allows you to search for an "ancestor" that matches a certain selector. — Scott Marcus, May 19 '17 at 17:31

Get id of parent div from clicked form submit

2 Answers2