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();
}
?>

ajax is best for your scenario. Share your complete code in question so i can help you. — Adnan Haider
– Adnan Haider, Commented Feb 21, 2018 at 5:03
How do I add more code to my question? Can I simply copy it here as a comment? Sorry I dont use this site alot — user5900363
– user5900363, Commented Feb 21, 2018 at 5:08

Sathishkumar · Accepted Answer · 2018-02-21 05:38:48Z

3

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>

edited Feb 21, 2018 at 5:38

answered Feb 21, 2018 at 5:03

Sathishkumar

3,7932 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user5900363 Over a year ago

Thank you! I will look at this

Adnan Haider Over a year ago

@Henk use this answer,just do one thing more. instead of this { $('.container-fluid').append(response.message); } use this one { $('.container-fluid').html(response.message); } You want to disappear the form after successful submitting message. Right?

user5900363 Over a year ago

Do I keep this inside the form? action="thankyou.php"

Sathishkumar Over a year ago

No need to change. event.preventDefault() stops the form submission.

Sathishkumar Over a year ago

$('.container-fluid').append(response.message); will display the message inside the div. Only You need to do is return the PHP response in JSON format.

|

Anil Kumar Sahu · Accepted Answer · 2018-02-21 04:57:55Z

1

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.

answered Feb 21, 2018 at 4:57

Anil Kumar Sahu

5772 gold badges7 silver badges28 bronze badges

Collectives™ on Stack Overflow

Display message after php form submit INSIDE same page

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related