Ajax/JQuery form refresh on submit

Question

I have a page with three simple html forms which submit to various tables in a database (using AJAX and JQuery). When a form is submitted, it currently disappears and a message posts:

<div class="success_m" style="display:none;">
   <p>Manufacturer has been added!</p>
   <h4><a href="path/to/the/forms/page">Add another Manufacturer!</a></h4>
</div>

To post another manufacturer to the database, I click the "Add another Manufacturer!" link and it refreshes the whole page. I've tried to set it up so that when the form is submitted, it disappears, a success message shows for a second, and then the cleared form comes back...It works except now the form doesn't disappear at all, and the message just flashes below it.

My attempt is below, thanks for any advice!!

Mike

$(document).ready(function(){
    $("form#submit_m").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var manu_name       = $('#manu_name').attr('value');
    var manu_web        = $('#manu_web').attr('value');
    var manu_email      = $('#manu_email').attr('value');
    var manu_phone      = $('#manu_phone').attr('value'); 
    var manu_phone_ext  = $('#manu_phone_ext').attr('value');
    var manu_info       = $('#manu_info').attr('value'); 

        $.ajax({
            type: "POST",
            url: "process_m.php",
            data:"manu_name="+ manu_name+"&manu_web="+manu_web+"&manu_email="+manu_email+"&manu_phone="+ manu_phone
            +"&manu_phone_ext="+manu_phone_ext+"&manu_info="+manu_info,
            success: function(){
                // reset form, success message, refresh form 
                resetForm($('#submit_m'));
                $('form#submit_m').hide();
                $('div.success_m').fadeIn(250).delay(1000).fadeOut(250);
                $('form#submit_m').show();
            }
        });
    return false;
    });
});

That resetform function in the success queue is from THIS SO post.

Any help is appreciated!

Gabe · Accepted Answer · 2012-04-13T20:55:08.973

1

You're missing open and closing parenthesis on the call of the show() function

...
$('div.success_m').fadeIn(250).delay(1000).fadeOut(250);
$('form#submit_m').show(); // add parenthesis here
...

To make the form hide and re-appear you need to fade it back like your success div or use something like a setTimeout(). The way you're handling it now it just hides and then shows with no break in between. So it appears instantaneous...

Example:

setTimeout(function() { $('form#submit_m').show(); }, 1000);

Here is a jsFiddle example

edited Apr 13 '12 at 20:55

answered Apr 13 '12 at 20:38

Gabe

49,577
28
142
181

OK. It does work, except that now the form never disappears. The message simply displays below it and disappears. It's functional, but I feel like the form should disappear so that a user is confident that their input was accepted. – NallyRoll Apr 13 '12 at 20:42
nah, still not getting it...the form won't disappear. – NallyRoll Apr 13 '12 at 20:50
LEGENDARY. @Gabe Sorry about the delay, had to catch a quick flight. Got it working, thanks for holding my hand through it. Best, Mike – NallyRoll Apr 14 '12 at 16:56

Ajax/JQuery form refresh on submit

1 Answers1