Display message after php form submit INSIDE same page

Question

on my INDEX.HTML page I have a subscription form that writes data to a DB with php. Everything works honky-dori.

When I submit the form the site goes to the PHP file I use to submit the emails to me and the visitor. I then can echo a thank you message. However...I dont want the message to appear inside this php page....I want the form to disappear and the message appear on my index page inside a a tag...e.g a DIV.

How do I do this? If I need to use AJAX or JQUERY...could you please point me to the right place?

Here are some of the code:

 <div class="container-fluid">
 <form action="thankyou.php" method="post">
     <div class="form-group">
       <label for="firstname">First Name:</label>
       <input type="input" class="form-control" id="firstname"  name="firstname">      
       <label for="lastname">Last Name:</label>
       <input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
       <label for="email">Email:</label>
       <input type="email" class="form-control" id="email" placeholder="" name="email">      
       </div>
       <button type="submit" class="btn btn-warning">Submit</button>
   </form>
   </div>

thankyou.php

<?php

require 'connection.php';
$conn         = Connect();
$firstname    = $conn->real_escape_string($_POST['firstname']);
$lastname     = $conn->real_escape_string($_POST['lastname']);
$email        = $conn->real_escape_string($_POST['email']);
$myemail      = "myemailaddress";    
$query        = "INSERT into subscription (firstname,lastname,email) VALUES('" . $firstname . "','" . $lastname . "','" . $email . "')";
$success      = $conn->query($query);
$subject1     = "New eBook Subscriber";


if (!$success) {
    die("Couldn't enter data: ".$conn->error);
} else {

  $headers  = "MIME-Version: 1.0" . "\r\n";
  $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
  $headers .= 'From: ' .$myemail. "\r\n";


 $message = "some message";

  $messageb = "some message";

  mail($email, $subject, $messageb, $headers);    
  mail($myemail, $subject1, $message, $headers); 

?><META HTTP-EQUIV="Refresh" CONTENT="1;URL=index.html">

<?php 
$conn->close();
}
?>

Answer 1

Try this solution

<div class="container-fluid">
 <form action="thankyou.php" method="post" id="form">
     <div class="form-group">
       <label for="firstname">First Name:</label>
       <input type="input" class="form-control" id="firstname"  name="firstname">      
       <label for="lastname">Last Name:</label>
       <input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
       <label for="email">Email:</label>
       <input type="email" class="form-control" id="email" placeholder="" name="email">      
       </div>
       <button type="submit" class="btn btn-warning">Submit</button>
   </form>
   </div>

<script>


$('#form').on('submit', function(event) {
 event.preventDefault(); //stops form on submit
  var formData = {};
  $.each($("#form").serializeArray(), function (i, field) {
    formData[field.name] = field.value;
  });
  $.ajax({
  url: 'thankyou.php',
  data: formData,
  method:'POST',
  success: function(response) { 
   $(this).hide(); //sets css display:none to form
   var message = "Thank you!";  
   $('.container-fluid').html(message);
   }
});    

});
</script>

Answer 2

Set the redirect after the successfully email the data and set a session variable and print this session variable in the html page. this may solve your problem however you can also use ajax to send the data and solve this problem.