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

Question

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 submissio

Answer 1

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

Solution:

Place this in the of your webpage.

OR

Download JQuery and include it the same way.

Form:

Your contact form remains un-changed.

    Your Name
    

    Email Address
    

    Message
      

    Send

Returned Data:

Add your response element where you want in the body.

Javascript:

Now place (preferably just before ) the javascript code:

Action Script:

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

Thank you for your comment";
    }
    else
    {
        echo "
Sorry, there has been an error
";
    }

?>

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.