title: Hide html form after submission?
body: <p>I have an HTML form that posts to a php script that then emails me the forms contents.
  I'm also using javascript form validation and some jquery ajax so that the page doesn't reload.</p>
  
  <p>HTML -</p>
  
  <pre><code>&lt;form action="mail.php" class="contactus" onsubmit="return ValidateRequiredFields();"   name="contactus" method="POST"&gt;
  &lt;p class="floatleft" style="width:200px; background-color:#FF0000; line-height:50px; margin:0; padding:0;"&gt;Nameeeeee&lt;/p&gt; &lt;input class="sizetext" type="text" maxlength="10" name="name"&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;p class="floatleft" style="width:200px;"&gt;Email&lt;/p&gt; &lt;input class="sizetext" type="text" maxlength="10" name="email"&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;p class="floatleft" style="width:200px;"&gt;Telephone&lt;/p&gt; &lt;input class="sizetext" type="text" maxlength="10" name="telephone"&gt;
  
  
  &lt;p&gt;Priority&lt;/p&gt;
  &lt;select name="priority" size="1"&gt;
  &lt;option value="Low"&gt;Low&lt;/option&gt;
  &lt;option value="Normal"&gt;Normal&lt;/option&gt;
  &lt;option value="High"&gt;High&lt;/option&gt;
  &lt;option value="Emergency"&gt;Emergency&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/select&gt;
  &lt;p&gt;Message&lt;/p&gt;&lt;textarea name="message" rows="6" cols="25"&gt;&lt;/textarea&gt;&lt;br /&gt;
  
  &lt;br /&gt;
  &lt;input class="buttonstyle" type="submit" value="Send"&gt;
  &lt;/form&gt;
  
      &lt;div id="formResponse"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>PHP -</p>
  
  <pre><code>&lt;?php $name = $_POST['name'];
  $email = $_POST['email'];
  $priority = $_POST['priority'];
  $message = $_POST['message'];
  $telephone = $_POST['telephone'];
  $formcontent="From: $name \n Email: $email \n Telephone Number: $telephone \n Priority: $priority \n Message: $message";
  $recipient = "myemailaddress";
  $subject = "Contact Form";
  $mailheader = "From: $email \r\n";
  mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
  echo "Thank You!";
  ?&gt;
  </code></pre>
  
  <p>Form validation and ajax -</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript"&gt;
  
  
  var FormName = "contactus";
  
  
  
  var RequiredFields = "name,email,priority,message";
  
  
  
  function ValidateRequiredFields()
  {
  var FieldList = RequiredFields.split(",")
  var BadList = new Array();
  for(var i = 0; i &lt; FieldList.length; i++) {
      var s = eval('document.' + FormName + '.' + FieldList[i] + '.value');
      s = StripSpacesFromEnds(s);
      if(s.length &lt; 1) { BadList.push(FieldList[i]); }
      }
  if(BadList.length &lt; 1) { return true; }
  var ess = new String();
  if(BadList.length &gt; 1) { ess = 's'; }
  var message = new String('\n\nThe following field' + ess + ' are required:\n');
  for(var i = 0; i &lt; BadList.length; i++) { message += '\n' + BadList[i]; }
  alert(message);
  return false;
  }
  
  function StripSpacesFromEnds(s)
  {
  while((s.indexOf(' ',0) == 0) &amp;&amp; (s.length&gt; 1)) {
      s = s.substring(1,s.length);
      }
  while((s.lastIndexOf(' ') == (s.length - 1)) &amp;&amp; (s.length&gt; 1)) {
      s = s.substring(0,(s.length - 1));
      }
  if((s.indexOf(' ',0) == 0) &amp;&amp; (s.length == 1)) { s = ''; }
  return s;
  }
  // --&gt;
  &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
              $(document).ready(function() {
  
                  $(".contactus").submit(function() {
  
                      $.post("mail.php", $(".contactus").serialize(),
  
                          function(data) {
                              $("#formResponse").html(data);
                          }
                      );
                      return false;
                  });
              });
          &lt;/script&gt;
  </code></pre>
  
  <p>What I'd like to know is how to hide the form after it's submitted.</p>