AjaxJQuery form refresh on submit

Questions

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>
path/to/the/forms/page
path/to/the/forms/page
</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;
    });
});

http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery

Any help is appreciated!

Answers

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

http://jsfiddle.net/PzSQj/ http://jsfiddle.net/PzSQj/

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/10147973/ajax-jquery-form-refresh-on-submit

Related