Question

I have a form that pops up using jQuery, when I click on submit, the form submits and then the form is replace with a message. When i press close the popup box closes out. The problem that I am having is this, how can I remove the message that comes in after hitting submit back to initial state (which is the form itself).

This is what my code looks like.

<script type="text/javascript">
$(document).ready(function(){ 
    $('#send').click(function(){
        $.post('process.php', {option:$(".option").val(),picid:$("#picid").val()    },
        function(response){
            var message = 'thanks';
            $('#formMsg').html(message);
        }
        );
        return false;
    });
    $('#close').click(function(){
        $('#Container').fadeOut();
        $("#formData")[0].reset(); 
    });
}); 
</script> 

Answer 1

You can have a message container inside form and show that when you want and hide result all content and vice versa. Try this.

$(document).ready(function(){ 
   $('#send').click(function(){
         $.post('process.php', { 
               option: $(".option").val(), 
               picid: $("#picid").val() 
            },
            function(response){
               var $msg = $('#msgContianer');
               if($msg.length == 0){
                  $msg = $('<div id="msgContainer" />')  
                         .appendTo($('#Container'));   
               }
               $msg.html('thanks').show();
               $("#formData").hide();
         });
         return false;
   });
   $('#close').click(function(){
        $('#Container').fadeOut(500, function(){
           $("#formData").show()[0].reset(); 
           $('#msgContianer').hide();
        });
   });
});