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

forms, jquery, php

Solution

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      = "xxx@xxx.xxx";
    $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.

Problem

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 = "support@loaidesign.co.uk"; $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> ```

Original source