AJAX Form Submission Styling

I am using Ajax with jQuery to submit a webform. When the webform submits a nice thank you message comes up. The message covers the form itself and will provide the user with information on what to do next etc. The issue is that the form can have several fields and when the user hits submit they see the form disappear but that is about it.

I added some JS t开发者_运维技巧hat would kick the user to the top of the page (and see the thank you message at the top) but still there can be a lot of blank space where the form was.

The question I have is how would I go about having the form change from its starting state to display:none; while the confirmation message shows in its place.

Here is a copy of my code:

function jqsub() {

var $j = jQuery.noConflict();
var $jform = $j('#ajaxform'); // form ID
var $jmessagebox = $j('#ajaxdiv'); // message box ID
var $jsuccessmessage = "<h3>Thank You For Your Submission!</h3>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3>"; //error message in HTML format

$j.ajax({
    type: 'POST',
    url: $jform.attr('action'),
    data: $jform.serialize(), 
    success: function (msg) { 
                        if (msg.FormProcessV2Response.success) {
                        $jmessagebox.append($jsuccessmessage) 
                        $jmessagebox.fadeIn();
                        }
                        else {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();  
                        }    
                },
    error: function (msg) {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();
                },
     });
$j( 'html, body' ).animate( { scrollTop: 0 }, 0 );
}

Here is the page I am working with: http://ubhape2remodel.businesscatalyst.com/testform.html

One other note: If there is an error on the form what is a simple way to have the Error message go away and the form show again? (Basically swapping states back to where the form shows vs the message) Thanks again for your help!

Hope all of that makes sense.

I welcome any advice, ideas, and help.

Thanks!

Lynda

You could fade your form out slowly and then show the mesage:

$jform.fadeOut("slow", function(){
  $jmessagebox.fadeIn("slow");
});

Hope this helps. Cheers

you can hide the elements using .hide()

Why not extracting the message from the form, and on success, first fading out the form, then fading in the message:

 if (success) {
     $('#formId').fadeOut('fast', function(){
          $('#messageId').fadeIn('fast');
     });
 }

To make'em happen one after the other (sequential) you have to provide a callback function for fadeOut.

The ID of the form on your page is 'ajaxform' so the following should hide the form (using the $j object that you have defined above):

$j("#ajaxform").css("display","none");

May I also suggest putting the hiding/scrolling code inside the success callback function? If the form isn't submitted successfully, you don't want to tell your users it was, do you?

Edited to show bringing back the form after an error (where buttonID is the ID of the button in the messagebox:

$j("#buttonID").live("click",function(){
    $jmessagebox.fadeOut("slow", function(){
        $jform.fadeIn("slow");
    });
});