CODEWITHSUNDEEP
phpforms
Andy
Andy

Reputation: 1432

Form feedback without a page refresh

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 = "[email protected]";
$subject = "Form Submission Results";
$mailheaders = "From: My Web Site <[email protected]> \n";
$mailheaders = "Reply-To: ".$_POST["email"];
//send the mail
mail($recipient, $subject, $msg, $mailheaders);
?>
</body>
</html>

Upvotes: 0

Views: 2734

Answers (5)

James
James

Reputation: 3805

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
        }
    });
});

Upvotes: 1

Justin K
Justin K

Reputation: 318

You might wanna start getting into AJAX.

http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/

http://en.wikipedia.org/wiki/AJAX

Upvotes: 1

Eugen Rieck
Eugen Rieck

Reputation: 65274

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.

Upvotes: 1

Jeremy Harris
Jeremy Harris

Reputation: 24549

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.

Upvotes: 2

rayred
rayred

Reputation: 107

This is where you need to start learning AJAX. Its purpose accomplishes exactly what you are doing. It stands for Asynchronous Javascript And XML.

Upvotes: 1

Related Questions