title: Load Div after Submit Required Fields on PHP Form
body: <p>I have a hidden div I am loading on click of submit button. I also have .notShouldBeBlank on the script for the form. What is the right method so that the php sends results and the hidden div will not load until all required fields are complete? It's currently loading the hidden div and sending results as soon as I click submit. What am I doing wrong?</p>
  
  <pre><code>&lt;?php
  $name = $_POST['name'];
  $address = $_POST['address'];
  $city = $_POST['city'];
  $state = $_POST['state'];
  $phone = $_POST['phone'];
  $email = $_POST['email'];
  
  $name = stripslashes($name);
  $address = stripslashes($address);
  $city = stripslashes($city);
  $state = stripslashes($state);
  $phone = stripslashes($phone);
  $email = stripslashes($email);
  
  
  $to  = 'myemail@thisismywebsite.com ' . ', ';
  $to .= $Email; 
  
  $from = "$Email ";
  $subject = 'Look and Learn: Applicant'; 
  $message = &lt;&lt;&lt;EOF
  &lt;html&gt;
  &lt;body bgcolor="#FFFFFF"&gt;
  
  &lt;b&gt;Look and Learn: Applicant&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;b&gt;Name:&lt;/b&gt; $name&lt;br /&gt;
  &lt;b&gt;Address:&lt;/b&gt; $address / $city, $state&lt;br /&gt;
  &lt;b&gt;Phone:&lt;/b&gt; $phone&lt;br /&gt;
  &lt;b&gt;Email:&lt;/b&gt; $email&lt;br /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  EOF;
  //end of message
  
  // Additional headers
  $headers .= 'From: Razor Chic of Atlanta &lt;info@thebrlab.com&gt;' . "\r\n";
  $headers .= "Content-type: text/html\r\n";
  $to = "$to";
  
  mail($to, $subject, $message, $headers);
  
  ?&gt;
  
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;Sign Up&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/sign-up.css"&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function() {
  $('#submit').click(function() {
  $('#thankyou').show();
  $("#hidden1").html($("#thankyou").html());
  });
  });
  
  &lt;/script&gt;
  
  &lt;script&gt;
  $('#myContact').submit(function () {
  
  $.each($('#myContact .notShouldBeBlank'), function()
  {
  if($(this).val() == ''){
  $(this).after('&lt;span class="error"&gt;This field is required.&lt;/span&gt;');
  }
  });
  
  // Other groups validated here
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;"&gt;
  
  
  
  &lt;div id="wrap"&gt;
  &lt;div id="hidden1"&gt;&lt;/div&gt;
  &lt;div style="font-size: 18px; font-weight: bold; font-family: Verdana, Geneva, sans-serif;"&gt;
  Sign-Up: Look And Learn Class
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;form id="form" action="" name="myContact" onSubmit="return validateForm()" method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
  &lt;label&gt;
  &lt;span&gt;Name: *&lt;/span&gt;&lt;br&gt;
  &lt;input name="name" type="text" size="64" placeholder="Name"&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;table width="100%" &gt;
  
  &lt;tr&gt;
  
  &lt;td width="230"&gt;
  &lt;label&gt;
  &lt;span&gt;Address: *&lt;/span&gt;&lt;br&gt;
  &lt;input placeholder="Address" size="100" type="text" name="address" maxlength="100"&gt;
  &lt;/label&gt;
  &lt;/td&gt;
  
  &lt;td width="160"&gt;
  &lt;label&gt;
  &lt;span&gt;City *&lt;/span&gt;&lt;br&gt;
  &lt;input placeholder="City" name="city" type="text" id="city" maxlength="100" /&gt;
  &lt;/label&gt;
  &lt;/td&gt;
  
  &lt;td width="189"&gt;
  &lt;label&gt;
  &lt;span&gt;State *&lt;/span&gt;&lt;br&gt;
  &lt;input placeholder="State" name="city" type="text" id="city" maxlength="3" /&gt;
  &lt;/label&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;label&gt;
  &lt;span&gt;Phone: *&lt;/span&gt;&lt;br&gt;
  &lt;input placeholder="Phone" size="64" type="text" name="phone"&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
  &lt;label&gt;
  &lt;span&gt;Email: *&lt;/span&gt;&lt;br&gt;
  &lt;input placeholder="Email address" size="64" type="email" name="email"&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;button name="submit" type="submit" id="submit"&gt;S  I  G  N    U  P&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;p&gt;Note: * Fields are required&lt;/p&gt;
  
  &lt;/div&gt;
  
  
  &lt;!---- THANK YOU----&gt;
  &lt;?php
  if($sent){
  
  echo '&lt;div id="thankyou" style="display:block;"&gt;';
  }
  else{
  echo '&lt;div id="thankyou" style="display:none;"&gt;';
  }
  ?&gt;
  
  
  &lt;!---- PAY BEGINS ----&gt;
  &lt;div id="paynow1-wrapper"&gt;
  &lt;div id="paynow1"&gt;
  
  &lt;form method="post" action="https://www.paypal.com/cgi-bin/webscr"&gt;
  &lt;input type="hidden" name="cmd" value="_cart"&gt;
  &lt;input type="hidden" name="add" value="1"&gt;
  &lt;input type="hidden" name="business" value="Razorchicofatlanta@gmail.com"&gt;
  &lt;input type="hidden" name="item_name" value="Look and Learn: Deposit"&gt;
  &lt;input type="hidden" name="amount" value="100.00"&gt;            
  &lt;input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html"&gt;
  &lt;input type="hidden" name="undefined_quantity" value="1"&gt;
  
  &lt;input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button"&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;!---- PAY ENDS ----&gt;
  
  
  &lt;!---- PAY BEGINS ----&gt;
  &lt;div id="paynow2-wrapper"&gt;
  &lt;div id="paynow2"&gt;
  
  &lt;form method="post" action="https://www.paypal.com/cgi-bin/webscr"&gt;
  &lt;input type="hidden" name="cmd" value="_cart"&gt;
  &lt;input type="hidden" name="add" value="1"&gt;
  &lt;input type="hidden" name="business" value="Razorchicofatlanta@gmail.com"&gt;
  &lt;input type="hidden" name="item_name" value="Look and Learn: Balance"&gt;
  &lt;input type="hidden" name="amount" value="99.00"&gt;            
  &lt;input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html"&gt;
  &lt;input type="hidden" name="undefined_quantity" value="1"&gt;
  
  &lt;input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button"&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;!---- PAY ENDS ----&gt;
  
  
  
  &lt;!---- PAY BEGINS ----&gt;
  &lt;div id="paynow3-wrapper"&gt;
  &lt;div id="paynow3"&gt;
  
  &lt;form method="post" action="https://www.paypal.com/cgi-bin/webscr"&gt;
  &lt;input type="hidden" name="cmd" value="_cart"&gt;
  &lt;input type="hidden" name="add" value="1"&gt;
  &lt;input type="hidden" name="business" value="Razorchicofatlanta@gmail.com"&gt;
  &lt;input type="hidden" name="item_name" value="Look and Learn: Full Payment"&gt;
  &lt;input type="hidden" name="amount" value="199.00"&gt;            
  &lt;input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html"&gt;
  &lt;input type="hidden" name="undefined_quantity" value="1"&gt;
  
  &lt;input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button"&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;!---- PAY ENDS ----&gt;
  
  
  
  &lt;img src="images/thank-you/look-and-learn1.png" /&gt;
  
  &lt;/div&gt;
  &lt;!---- THANK YOU----&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>