Home » Php » php – Show submitted form response on the same page. (No Reload)

php – Show submitted form response on the same page. (No Reload)

Posted by: admin July 12, 2020 Leave a comment

Questions:

How would I go about showing the response from a submitted contact form (on the same page underneath the form) rather than sending the user to a new page after the submission?

I have seen some people creating a div element, and then putting the received response into it. Is that a recommended approach?

Here is what I have so far:

PHP:

<?php

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];

$to = "[email protected]";
$subject = "";
$message = "";
$headers = "From: $email";

if(mail($to,$subject,$message,$headers))
{
    echo "<h2>Thank you for your comment</h2>";
}
else{
    echo "<h2>Sorry, there has been an error</2>";
}

?>

and here is the HTML:

<div class="wrapperB">
                <div class="content">
                    <form id="contactForm" action="assets/email.php" method="get">

                        <label  for="name">Your Name</label>
                        <input  name="name" id="name" type="text" required placeholder="Please enter your name">

                        <label  for="email">Email Address</label>
                        <input  name="email" id="email" type="email" required placeholder="Please enter your email address here">

                        <label  for="message">Message</label>
                        <textarea name="message" id="message" required></textarea>  

                        <button id="submit" type="submit">Send</button> 
                    </form>
                        </div>
                    </div>                  
                </div>
How to&Answers:

This is a working example using the suggested example from the JQuery site and pajaja’s answer.

Solution:

Place this in the <head> of your webpage.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

OR

Download JQuery and include it the same way.

Form:

Your contact form remains un-changed.

<form id="contactForm" action="assets/email.php" Method="POST">
    <label for="name">Your Name</label>
    <input name="name" type="text" required placeholder="Please enter your name">

    <label for="email">Email Address</label>
    <input name="email" type="email" required placeholder="Please enter your email address here">

    <label for="message">Message</label>
    <textarea name="message" required></textarea>  

    <button type="submit">Send</button>
</form>

Returned Data:

Add your response element where you want in the body.

<div id="contactResponse"></div>

Javascript:

Now place (preferably just before </body>) the javascript code:

<script>
     $("#contactForm").submit(function(event) 
     {
         /* stop form from submitting normally */
         event.preventDefault();

         /* get some values from elements on the page: */
         var $form = $( this ),
             $submit = $form.find( 'button[type="submit"]' ),
             name_value = $form.find( 'input[name="name"]' ).val(),
             email_value = $form.find( 'input[name="email"]' ).val(),
             message_value = $form.find( 'textarea[name="message"]' ).val(),
             url = $form.attr('action');

         /* Send the data using post */
         var posting = $.post( url, { 
                           name: name_value, 
                           email: email_value, 
                           message: message_value 
                       });

         posting.done(function( data )
         {
             /* Put the results in a div */
             $( "#contactResponse" ).html(data);

             /* Change the button text. */
             $submit.text('Sent, Thank you');

             /* Disable the button. */
             $submit.attr("disabled", true);
         });
    });
</script>

Action Script:

Your contact (PHP) file remains the same but change $_GET to $_POST:

<?php

    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "[email protected]";
    $subject = "";
    $message = "";
    $headers = "From: $email";

    if( mail($to,$subject,$message,$headers) )
    {
        echo "<h2>Thank you for your comment</h2>";
    }
    else
    {
        echo "<h2>Sorry, there has been an error</h2>";
    }

?>

Result:

This should now send the data from the form on submit and then display the returned data in the #contactResponse element. The button will also set the text to “Sent, Thank you” while also disabling the button.

Answer:

You will need to use ajax for that. The simplest solution is to get jQuery javascript library an use it’s .post function for which you can find documentation and examples here. In your case it will look something like this:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){
    var name_value = $("#name").val();
    var email_value = $("#email").val();
    var message_value = $("#message").val();
    $.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
        $("#response").html(data);
    });
  });
})
</script>

Also your PHP code is wrong:

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']

You are getting $_GET['name'] for all 3 variables.

edit:
I added a complete example but it is not tested it’s just so you can have an idea how to do what you want. Also since this is using HTTP POST request, you will need to edit your PHP so it gets values $_POST array, not $_GET. Also you will need to add a <div id="response"></div> where you want to display the response.

Answer:

You can just keep it on the same page. For example, if your form is on contact.php, just echo your code like so:

<form action='' method='post'>
   <input type='test' name='name' placeholder='Your name here' required='required' /><br />
   <input type='submit' value='submit' name='contact' />
</form>
<?php
   if(isset($_POST['contact']) && !empty($_POST['name'])){
      echo "You submitted this form with value ".$_POST['name'].".";
   }
?>

Of course this will reload that page. If you don’t want the page to be reloaded, you need to use ajax.

Answer:

I did this with the Jquery Form Plugin. There’s another here.

My use case was a lot more involved. It included uploading a file along with some user entered fields and basic auth credentials in the header as well. The Form plugin handled them all using the normal $.ajax fields.