Form feedback without a page refresh
Question
I'm getting my feet wet with form processing so bear with me. I have a basic HTML form and a script that sends mail. At the moment it sends and refreshes to give feedback. What I would like is if the feedback could be given without refreshing the page.
HTML
<html>
<head>
<title>E-Mail Form</title>
</head>
<body>
<form action="beta_sendmail.php" method="POST">
<p><strong>Name: </strong><br/>
<input type="text" size="25" name="name" /></p>
<p><strong>E-Mail Address: </strong><br />
<input type="text" size="25" name="email" /></p>
<p><strong>Message: </strong><br />
<textarea name="message" cols="30" rows="5"></textarea></p>
<p><input type="submit" value="send" /></p>
</form>
</body>
</html>
and the PHP
<html>
<head>
<title>Mail Sending Script</title>
</head>
<body>
<?php
echo "<p>Thank you, <b>".$_POST["name"]."</b>, for your message!</p>";
echo "<p>Your email address is: <b>".$_POST["email"]."</b>.</p>";
echo "<p>Your message was: <br/>";
echo $_POST["message"]."</p>";
//start building the mail string
$msg = "Name: ".$_POST["name"]."\n";
$msg .= "E-Mail: ".$_POST["email"]."\n";
$msg .= "Message: ".$_POST["message"]."\n";
//set up the mail
$recipient = "mailto@me.com";
$subject = "Form Submission Results";
$mailheaders = "From: My Web Site <defaultaddress@yourdomain.com> \n";
$mailheaders = "Reply-To: ".$_POST["email"];
//send the mail
mail($recipient, $subject, $msg, $mailheaders);
?>
</body>
</html>
5 answers
solution1
2 ACCPTED 2012-02-16 15:30:27
If you use jQuery, as @Michael suggested, and which I also recommend, here is a great tutorial to do exactly that: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
In essence there are 3 parts:
1) HTML Form
2) Javascript/jQuery
- Handles form submit event. You can do client side validations here, and if satisfied, submit the form via AJAX to your php script for processing.
3) PHP script
- Handles server side processing of the form. Returns data back to your javascript so you can continue processing and do whatever you need to do from there.
solution2
1 2012-02-16 15:29:12
This is where you need to start learning AJAX. Its purpose accomplishes exactly what you are doing. It stands for Asynchronous Javascript And XML.
solution3
1 2012-02-16 15:31:23
You can go 2 ways:
1.) to look into some JavaScript, that does the job for you, most likely AJAX , via jQuery or Dojo or, if you are a masochist, by hand.
2.) Have an iframe somewhere in your page and make your form target be the iframe - this could be the part of the page carrying the form - so the biggest part of the page would stand still, while the form is replaced by the "thankyou" message.
solution4
1 2012-02-16 15:33:06
You might wanna start getting into AJAX.
http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/
solution5
1 2012-02-16 15:34:07
You'd have to use jQuery. Something like this:
$("form").submit(function(event){
event.preventDefault();
var dataString = 'postVariableName=' + $("postVariableValue").val() + '&postVariableName=' + $("postVariableValue").val();
//alert (dataString);return false; //to check the string being sent
$.ajax({
type: "POST",
url: "postPath.php",
data: dataString,
success: function(data) {
//create jquery object from the response html
var $response=$(data);
//query the jq object for the values
var title = $response.filter('div#title').text(); //Check the resulting post page output for a div with an ID of "title", and put it's text into a variable called "title"
var cbody = $response.filter('div#cbody').html(); //Check the resulting post page output for a div with an ID of "cbody", and put it's html into a variable called "cbody"
$("input#title").val(title); //Display the title on the page
$("div#cbody").html(cbody); //Display the cbody on the page
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.