AWM Creative

Making a Success Message Show and Hide after a Form Submission

Published in CSS, HTML/XHTML, jQuery by Aaron

Recently, I’ve been working with a lot of form confirmations and have been thinking about the best way on how to approach these. Many forms redirect users to a separate page that displays a simple thank you/confirmation message and there are also the forms that display a confirmation on the same page.

So which approach is better? I think it really depends on the project and what type of form you create. Creating a separate page may not really be necessary. However, there are some circumstances where a separate page may be useful like displaying payment information. Most of the time a simple message that appears is good enough so that the user has some type of a confirmation allowing them to know that their information was processed.

Types of Confirmation Messages

Here are some examples of different form confirmation messages:

Thank you message on separate page (Yahoo!).

Confirmation message on separate page with a close button (LinkedIn).

Confirmation message on same page as form (WordPress admin).

There is one example missing from this list, which is basically the confirmation message that shows and hides after the submit button is clicked. This is what I’ll be going through in this tutorial.

jQuery


<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("#Button1").click(function(event){
         $(".message").show();
         $(".message").fadeOut(2500);
      });
   });
</script>


The above code is jQuery, which is what makes all the magic happen. You’ll also need to download the jQuery Library in order for it to work. Ok, let’s break this down a bit:

• $(“#Button1″).click(function(event){ – The ID referenced here is from the button ID. When the button is clicked, it fires the event in jQuery.
• $(“.message”).show(); – This line of code allows the hidden success message to show.
• $(“.message”).fadeOut(2500); – And of course, this last piece fades out the success message. You can set the fadeOut property to slow or fast. You could also just keep it in milliseconds like I did, which allows more control.

CSS


.message {
   display: none;
   margin: 0 0 13px 0;
   padding: 13px 13px 13px 52px;
   background: url('icon_check.gif') left no-repeat #EFA;
   background-position: 13px 5px;
   border: solid 1px #BD8;
}


The success message is styled with the above properties. Pretty simple. I do have this class hidden by default so it doesn’t show up until the jQuery actually calls for it.

(X)HTML


<div class="message">Your update was successful.</div>
<input id="Button1" type="button" value="Send Message" class="frmButton" />


Please note that the ID on the button is the same as the one in the jQuery code above. These should be the same or the message will not show.

View Demo and Source Code

• Demo
• Source Code