title: Form Confirmation message ajax/jquery
body: <p>stmaybe tired, but I can't do what I want.</p>
  
  <p>I'd like a confirmation text saying like "Thanks for sumbitting this form" after the user clicked on the submit button (then sent to my e-mail). It's a one page website.
  I know I have to use a bit of jQuery, a bit of ajax (for not reloading the page right?) and my php script for the form ; to send values filled in the form to my e-mail. (&lt;- working)</p>
  
  <p>Any help? I already got another form and it's working too. but confirmation message not needed there.</p>
  
  <p>This is what I got so far but not seems to work..</p>
  
  <p><strong>At the top of my index.php</strong></p>
  
  <pre><code>&lt;?php
  if(isset($_POST['submitReserv'])){
  
          $sujet = 'stuff - reservation';
          $monEmail = 'email@email.com'; &lt;- my mail
          $headers ='From: '.$reservNom.'&lt;email@email.com&gt;';
  
          foreach ($_POST as $key =&gt; $value) {
              $message.=$key.' -&gt; '.$value.'
  ';
  
   }
  
  if(isset($_POST['lieu'])) 
   { 
         echo htmlentities($_POST['lieu']); 
   } 
  if(isset($_POST['ambiance'])) 
   { 
         echo htmlentities($_POST['ambiance']); 
   } 
   if(isset($_POST['menu'])) 
   { 
         echo htmlentities($_POST['menu']); 
   } 
  
  
      // ini_set('sendmail_from', $email); 
      mail($monEmail, $sujet, $message, $headers);
  
  
  }
  
  ?&gt;
  </code></pre>
  
  <p><strong>My all div for the form</strong></p>
  
  <pre><code>&lt;div id="form-reserv" class="page"&gt;
  
  &lt;div class="container"&gt;
  
      &lt;!-- Title Page --&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
              &lt;div class="title-page"&gt;
                  &lt;h2 class="title"&gt;Réservations&lt;/h2&gt;
                  &lt;h3 class="title-description"&gt;Reservez sur internet vos &lt;a href="#"&gt;dates&lt;/a&gt;.&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End Title Page --&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
              &lt;form id="reserv-form" class="nl-form contact-form" method="post"&gt;
                  &lt;p&gt;J'aimerais manger au/à 
                  &lt;select name="lieux"&gt;
                      &lt;option value="null" selected&gt;(cliquez ici)&lt;/option&gt;
                      &lt;option value="Parc"&gt;PdC&lt;/option&gt;
                      &lt;option value="Mont"&gt;MdA&lt;/option&gt;
                      &lt;option value="GP"&gt;GP&lt;/option&gt;
                  &lt;/select&gt;&lt;/p&gt;
                  &lt;p&gt;avec l'ambiance
                  &lt;select name="ambiance"&gt;
                      &lt;option value="null" selected&gt;(cliquez ici)&lt;/option&gt;
                      &lt;option value="Paradise"&gt;Paradise&lt;/option&gt;
                      &lt;option value="Heat"&gt;Heat&lt;/option&gt;
                      &lt;option value="Nature"&gt;Nature&lt;/option&gt;
  
                  &lt;/select&gt;&lt;/p&gt;
                  &lt;p&gt;et le menu
                  &lt;select name="menu"&gt;
                      &lt;option value="null" selected&gt;(cliquez ici)&lt;/option&gt;
                      &lt;option value="MP"&gt;Manneken Pies&lt;/option&gt;
                      &lt;option value="Atomnium"&gt;Atomnium&lt;/option&gt;
                      &lt;option value="Horta"&gt;Horta&lt;/option&gt;
                  &lt;/select&gt;&lt;/p&gt;
  
              &lt;br/&gt;
  
                  &lt;p class="contact-name"&gt;
                      &lt;input id="reservNom" type="text" placeholder="Votre nom" value="" name="reservNom" /&gt;
                  &lt;/p&gt;
                   &lt;p class="contact-name"&gt;
                      &lt;input id="reservPrenom" type="text" placeholder="Votre Prénom" value="" name="reservPrenom" /&gt;
                  &lt;/p&gt;
                  &lt;p class="contact-email"&gt;
                      &lt;input id="reservEmail" type="text" placeholder="Votre E-mail" value="" name="reservEmail" /&gt;
                  &lt;/p&gt;
                  &lt;p class="contact-name"&gt;
                      &lt;input id="nombre" type="text" placeholder="Nombre de personnes (Maximum 4 personnes)" max="4" name="nombre" /&gt;
                  &lt;/p&gt;
                  &lt;p class="contact-name"&gt;
                      &lt;input id="date" type="date" placeholder="Format : JJ/MM/AAAA" step="6"/&gt;
                  &lt;/p&gt;
                  &lt;p&gt;&lt;input value="RESERVEZ" class="submit" id="submitReserv" name="submitReserv" type="submit"&gt;
                   &lt;/p&gt;
  
                     &lt;div id="response"&gt;
                      &lt;/div
  
              &lt;/form&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>So, what am i suppose to write more and where? What is still needed, is to have this confirmation text. I got a main.js in my _includes/js directory..
  Sorry, i'm not so good with js and ajax for now.. 
  I'd appreciate you help me out!
  Thanks guys!</p>
  
  <hr>
  
  <p>EDIT - That is for another form in my one page that works.. but for not the one i have. </p>
  
  <pre><code>BRUSHED.contactForm = function(){
  $("#contact-submit").on('click',function() {
      $contact_form = $('#contact-form');
  
      var fields = $contact_form.serialize();
  
      $.ajax({
          type: "POST",
          url: "_include/php/contact.php",
          data: fields,
          dataType: 'json',
          success: function(response) {
  
              if(response.status){
                  $('#contact-form input').val('');
                  $('#contact-form textarea').val('');
              }
  
              $('#response').empty().html(response.html);
          }
      });
      return false;
  });
  </code></pre>
  
  <p>}</p>