CODEWITHSUNDEEP
jquery
Aaron
Aaron

Reputation: 1966

Hide Form After Submission

I'm using this form plugin

But for the life of me, I can't figure out how to do much DOM manipulation after the form has been submitted.

$('.save-form').each(function() {
    $(this).ajaxForm({
        beforeSubmit: function() {      
            //
        },
        success: function(data) {
            //
        }
    });
});

I've tried $(this).find('div').hide(); but to no avail.

HTML:

<form method="post" class="save-form">
    <!-- inputs are here -->
    <div>I want to hide this as well as the parent, "save-form".</div>
</form>
<form method="post" class="save-form">
    <!-- inputs are here -->
    <div>I want to hide this as well as the parent, "save-form".</div>
</form>
<form method="post" class="save-form">
    <!-- inputs are here -->
    <div>I want to hide this as well as the parent, "save-form".</div>
</form>

Yes, I have more than one instance of "save-form"

Upvotes: 0

Views: 1104

Answers (4)

James Andrew Smith
James Andrew Smith

Reputation: 1566

Not sure if this is the answer but could you wrap it around a div and hide that? Seems easiest way.

Upvotes: 0

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

each accepts two params. Use them.

$('[class=save-form]').each(function(index, form) {
    $(this).ajaxForm({
        beforeSubmit: function() {      
            //
        },
        success: function(data) {
            $(form).find('div').hide();
        }
    });
});

Upvotes: 2

James Allardice
James Allardice

Reputation: 165971

If you store a reference to this before calling ajaxForm you will be able to use that inside the event handlers:

$('[class=save-form]').each(function() {
    var form = $(this);
    $(this).ajaxForm({
        beforeSubmit: function() {      
            //
        },
        success: function(data) {
            form.hide();
        }
    });
});

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382696

Do:

$('[class=save-form]').each(function() {
    $(this).ajaxForm({
        beforeSubmit: function() {      
            //
        },
        success: function(data) {
            $('[class=save-form]').hide();
        }
    });
});

Notice that it will hide what is in the wrapped set $('[class=save-form]'). You may want to adjust your selector as per your needs.

By the way, you can use:

$('.save-form')

Instead of:

$('[class=save-form]')

Upvotes: 3

Related Questions