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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
