Hide Form After Submission

Question

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"

You could just use $(".save-form") rather than the longhand selector you've used. — Jeff Watkins
– Jeff Watkins, Commented Jun 11, 2012 at 9:05

Sarfraz · Accepted Answer · 2012-06-11 09:03:57Z

3

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]')

answered Jun 11, 2012 at 9:03

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

James Allardice Over a year ago

That will hide all elements that match [class=save-form] when one successfully completes.

Sarfraz Over a year ago

@JamesAllardice: Yeah was writing that (before your comment seen), updated.

Aaron Over a year ago

Oops, I asked my question wrong. I have updated my post to include what I'm trying to hide.

Sarfraz Over a year ago

@Aaron:For that you can use $('.save-form > div').hide(); for immediate div children or $('.save-form div').hide(); for divs at any depth. Notice that as you said this will hide divs only.

Sarfraz Over a year ago

@Aaron: You want to hide all forms and everything inside them right ?

|

Ivan Ivanic · Accepted Answer · 2012-06-11 09:13:56Z

2

each accepts two params. Use them.

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

edited Jun 11, 2012 at 9:13

answered Jun 11, 2012 at 9:07

Ivan Ivanic

3,0541 gold badge22 silver badges21 bronze badges

1 Comment

James Allardice Over a year ago

In this case form will be a DOM node, not a jQuery object. You will need to do $(form).hide();. But +1 for remembering that extra argument which I always forget!

James Allardice · Accepted Answer · 2012-06-11 09:06:28Z

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

James Andrew Smith · Accepted Answer · 2012-06-11 09:19:30Z

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

Collectives™ on Stack Overflow

Hide Form After Submission

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Related