在提交按钮单击，要提交表单并显示隐藏的div

I have PHP written for the form submit:

if($_POST['submit']) {
    $recipient="test@gmail.com";
    $subject="A Hooray moment has been shared with you";
    $sender=$_POST["sender"];
    $senderEmail=$_POST["senderEmail"];
    $message=$_POST["message"];

    $mailBody="Name: $sender
Email: $senderEmail

$message";

    mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
?>

Originally the javascript was written just for revealing on the click rather than including a bit to set the original setting to 'hide' the .done div. At that time there was also a CSS code to set the default .done display to none. That original javascript is below.

$( ".button" ).click(function(ev) {
    ev.preventDefault();
    $(".done").fadeIn('slow');
});

I now have javascript written to reveal the DIV after clicking the submit button, without a CSS display:none setting. This is the current Javascript:

$('document').ready(function() {
    $('.done').hide();
    $('.button').click(function(e) {
          $('.done').show();
          //e.preventDefault();
    });
});

When I fill out the forms and hit the submit button the PHP will load but the div won't appear. I get a confirmation email (like I want) but no div. When I manage to get the div to appear the PHP portion stops working (hitting the submit button will reveal the hidden div but the form doesn't actually submit and I receive no email). When the PHP portion works and I get a confirmation email I then the .done div never reveals. Below is my html for reference.

I'm looking for a way to make the div appear and the form submit (both events) after the submit button is clicked. It makes sense to write it all in PHP (or JS) but I'm not familiar enough with PHP to figure that out. Thanks in advance for any help.

<div class="col-md-6 col-md-offset-3">
    <div class="done">
        <h2>HOORAY!!!</h2>
        <img src="http://usatftw.files.wordpress.com/2013/11/824607200.gif?w=1000" alt="Touchdown dance" style="width:500px;height:400px; margin-top:0px; padding-top:0px;"></img>
    </div>
    <div class="form-group col-md-6 col-md-offset-3">
        <input type="radio" class="form-control radio" id="radio1"/>OMG! The greatest thing happened today...<br />
        <input type="radio" class="form-control radio" id="radio2"/>You wouldn't believe what happened...<br />
        <input type="radio" class="form-control radio" id="radio3"/>No s*** you'll never guess what happened...<br />
    </div>

    <form method="post" action="testemailform.php" id="form">
        <div class="container1">
            <input name="sender" placeholder="Name (Optional)">
        </div>
        <div class="container2">
            <input name="senderEmail" placeholder="Your Email (Optional)">
        </div>
        <div class="container3">
            <textarea rows="5" cols="50" name="message" placeholder="Tell me what happened!"></textarea>
        </div>
        <div class="button">
            <input type="submit" name="submit">
        </div>
    </form>
</div>

instead of javascript, use php to show div when form is submitted.

so create new php variable $css that hold stylesheet code.

<?php

//keep variable blank when page is loaded first time
$css = "";

if($_POST['submit']) {

   //add css to variable when form is posted
   $css = "display: none;";

   ...your email code goes here...

}
?>

Now in html, print $css variable.

<div class="done" style="<?php echo $css; ?>" >

When you submit a form (as you are doing) the page reloads.. ..so any JS functionality before this is pointless, as you are expecting Javascript to remember that on the last page, you clicked a button...

Use PHP to set a variable 'after' the form has submitted, that can then be used to determine if the extra <div> gets displayed ot not.