Question

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 that 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

Answer 1

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

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

Hope this helps. Cheers