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!

Answer 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