jquery div fadeout on child form event

Question

Hi.

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.

Answer 1

$('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}

Answer 2

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

Answer 3

You can use jQuery.parent() or jQuery.parents() to find out the div that encapsulates the form(s).

<div class="form-wrap">
    <!-- you can use .parent() here -->
    <form>
    </form>
</div>

<div class="form-wrap">
    <!-- you should use .parents() here -->
    <div class="some-class">
        <div class="some-other-class">
            <form>
            </form>
        </div>
    </div>
</div>