Question

I have been struggling with what I feel is a simple JQuery selector issue, but I’ve been messing around with it for some time now and can’t seem to get the desired outcome.

I have an unordered list containing multiple li’s, which are each siblings to hidden div containing a form element; so I essentially have multiple forms on a page. Without using IDs or additional classes, I would like to be able to “hide” or “slideUp” the current “hidden” div element upon submitting its corresponding form.

// if(data == “Thank you for your submission. A representative will contact you soon.”){ ‘close form containing div’ }

Any help would be most appreciated. A live version of the site and issue can be seen here: http://clients.jayjodesign.com/executive-council/staging/events.php

Answer 1

You are using $(this) inside the post method’s success handler where this will not point to the form which is being submitted. You should store the this instance into a local variable and then use that inside the success handler. Try this

$(".event-form").submit(function(event) {
                var $form = $(this);
        var action = $form.attr('action'),
            $fields = $form.serializeArray();

        $.post(action, $fields, function(data, textStatus, xhr) {

            alert(data);

            if(data == "Thank you for your submission. A representative will contact you soon."){

                $form.parent('div.right-column').slideUp();

            }

        });

        return false;
    });