Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
337 views
Welcome To Ask or Share your Answers For Others

1 Answer

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...