jquery div fadeout on child form event

I'm new in jquery/javascript and couldn't google for any solution.

I have number of divs generated automatically from cycle. Each of them contains form as a child element. So on form submit I'd like the corresponding parent div to fadeout.

I am using Ajax for form submission. Basically, now I have an event handler 'submit' binded to all child forms within divs. Here what it looks like

        $('#divCreatedActivities').children('div').children('form').submit(function() {
            var options开发者_运维百科 = { 
                    target:        $('#divCreatedActivities').children('div'), 
                    dataType:      'xml',
                    success:       submittedActivity
            };
            $(this).ajaxSubmit(options); 
            return false; 
        });

        function submittedActivity() {
            alert('ahoy!');     
        }

How can I do that with JQuery?

Thank you.

$('form').submit(function(){
    $(this).parent().fadeOut();
});

That's the way to do it. But I have a question, how can you see it fading when it's submitting?? Isn't it reloading or something? Are you using ajax?

based from your edited post,

$('#divCreatedActivities form').submit(function() {
    var $this = $(this);
    var options = { 
         target:        $('#divCreatedActivities').children('div'), 
         dataType:      'xml',
         success:       function() {
                     $this.parent().fadeOut();
                     alert('ahoy!');    
         }
    };
    $this.ajaxSubmit(options); 
    return false; 
});

/* remove this
function submittedActivity() {
    alert('ahoy!');     
} */

_{Welcome to stackoverflow.com
Don't forget to accept an answer}

Yes, you can use a submit handler to fade out the div containing the form:

$('#theFormId').submit(function() {
    $('#theDiv').fadeOut();
});

However, unless you delay the form submission or use ajax instead of normal form submission, the animation may never happen — because a normal form submission tears down the page and replaces it with the result of the submission to the server. So for instance, if you want the fadeout to take 500ms, you could do this (live example):

// #theFormId can be any selector that selects the form(s) you want
// handled in this way; it's just an example
$('#theFormId').submit(function() {
    // `this` is set to the form's raw DOM element, remember it for use
    // in the closure below.
    var form = this;

    // Get a jQuery wrapper for the form element, use it to find the
    // first containing div. Start a fadeout on that div, and use the
    // fadeout callback to trigger the actual form submission.
    $(this).parents('div:first').fadeOut(500, function() {
        // Submit the form
        form.submit();
    });

    // Disable *this* form submission in favor of the above
    return false;
});

Of course, that delays the form submission by half a second, which not all users may like... Also, if you're relying on knowing which submit button the user pressed, the above loses that (because we're not submitting the form using the button anymore, we're cancelling that one and then submitting it later with code).

In the above I'm using parents with the selector "div:first" to find the first ancestor element that's a div; you can modify that selector as appropriate, or if the div is the immediate parent of the form, you can just use parent instead.

$('#my-form-id').submit(function(){ $(this).parent().fadeOut(600); });