Contact form response message not working

Question

So i am trying to move the location of my response message after the send button has been hit by the user. It comes up at the top of the screen but I want it to appear in a div just below. I read that using javascript should work. Here's what ive put:
PHP:
<?php
if ($_POST){
if (!filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL)){
$message="Please provide a correct email address";} else {
  $fname = strip_tags($_POST['fname']);
  $sname = strip_tags($_POST['sname']);
  $telephone = strip_tags($_POST['tel']);
  $email = $_POST['email'];
  $comments = strip_tags($_POST['comments']);
  $to = '[email protected]';
  $subject = 'Contact form submitted.';
  $body = $fname. "\n". $sname. "\n". $comments;
  $headers = 'From: ' .$email;
  if (mail($to, $subject, $body, $headers)) {
  echo 'Thanks for contacting us. We\'ll be in touch soon!';
  } else {
  $message = 'Sorry an error occurred. Please try again later.';
?>
<?php echo "<p style='color:red'>$message</p>"; ?>
Form:
<div class="contact_form">
<table class="table">
  <tbody>
<form id="contactForm" action="" method="post">
    <tr>
      <th scope="row">First Name:</th>
      <td><textarea name="fname"  cols="100" rows="3" id="fname"></textarea></td>
    </tr>
    <tr>
      <th scope="row">Surname:</th>
      <td><textarea name="sname" cols="100" rows="3" id="sname"></textarea></td>
    </tr>
    <tr>
      <th scope="row">Email Address:</th>
      <td><textarea name="email" cols="100" rows="3" id="email"></textarea></td>
    </tr>
    <tr>
      <th scope="row">Telephone Number:</th>
      <td><textarea name="tel" cols="100" rows="3" id="tel"></textarea></td>
    </tr>
    <tr>
      <th scope="row">Comments:</th>
      <td><textarea name="comments" cols="100" rows="10" id="comments"></textarea></td>
    </tr>
    <tr>
      <th scope="row"></th>
      <td height="40px"><input type="submit"></td>
    </tr>
    <tr>
    </form>
    </tr>
  </tbody>
</table>
Javascript:
<script type="text/javascript" src="morris_construction/jquery-1.11.2.min.js"></script>
<script>
     $("#contactForm").submit(function(event)
         /* stop form from submitting normally */
         event.preventDefault();
         /* get some values from elements on the page: */
         var $form = $( this ),
             $submit = $form.find( 'button[type="submit"]' ),
             fname_value = $form.find( 'input[name="fname"]' ).val(),
  sname_value = $form.find( 'input[name="sname"]' ).val(),
  tel_value = $form.find( 'input[name="tel"]' ).val(),
             email_value = $form.find( 'input[name="email"]' ).val(),
             comments_value = $form.find( 'textarea[name="comments"]' ).val(),
             url = $form.attr('action');
         /* Send the data using post */
         var posting = $.post( url, {
                           fname: fname_value,
    sname: sname_value,
    tel: tel_value,
                           email: email_value,
                           comments: comments_value
         posting.done(function( data )
             /* Put the results in a div */
             $( "#contactResponse" ).html(data);
             /* Change the button text. */
             $submit.text('Sent, Thank you');
             /* Disable the button. */
             $submit.attr("disabled", true);
</script>
</div><!-- end of contact form -->

Answer 1

No javascript needed or desired for this solution.
Instead of
echo 'Thanks for contacting us. We\'ll be in touch soon!';
  } else {
echo 'Sorry an error occurred. Please try again later.';
make them variables, like this:
$message = 'Thanks for contacting us. We\'ll be in touch soon!';
  } else {
$message = 'Sorry an error occurred. Please try again later.';
Then, in the location where you want the message to appear. . .
<?php echo $message ?>