Submit form to php using jquery

Question

I had a contact form that submitted to a php page with this content:

<?php 
$to = 'emailtosendto';
$subject = 'New message from contact form';
$name = $_POST['fullname'];
$mail = $_POST['email'];
$company = $_POST['company']; 
$phone = $_POST['phone']; 
$comment = $_POST['comment'];
$message = $_POST['message'];   
$body = 'Mr/Mrs '.$name.' wishes to contact us.
He\'s from a company called '.$company.'.
You can email him back at '.$mail.', or call him on '.$phone.'.
He was sneaky and found us through '.$comment.'.
He would like to say,
'.$message.'';
ini_set('sendmail_from', '$mail');
mail($to, $subject, $body);
header('location:./?sent');
?>

I have now changed the form to a nice live validated jQuery form, you can see the fiddle of it below.

http://jsfiddle.net/swift29/6UC7m/

I was wodering how I could change any of this code to still do the same function but make it so a popup appears confirming the message has been sent using jQuery then for it to fade back out and the form have been reset

Thanks in advance, Swift

Please escape your mail inputs: http://stackoverflow.com/questions/8071916/escape-string-to-use-in-mail — Dunhamzzz, Aug 31 '12 at 13:28
to follow up on Sam's comment, One word that will solve your problem: "Ajax" — Gonçalo Vieira, Aug 31 '12 at 13:32

score 1 · Accepted Answer · answered Aug 31 '12 at 13:35

Instead of submitting, you can use AJAX. That way you can get a popup when its done.

Example:

$.ajax(
    url:  "urlofscript.php",
    data: {
              fullname: variableContainingFullname, // i.e. var variableContainingFullname = $("#fullname").var();
              email:    variableContainingEmail,
              // etc, all the php variables in POST
          },
    type: "POST",
    success: function(result)
    { 
        alert("DONE"); 
    }

score 0 · Answer 2 · answered Aug 31 '12 at 13:34

You're looking for jQuery's ajax() function.

AJAX will send POST queries through Javascript. This will mean that you won't have to refresh the page, it will get sent automatically and the script (mailer.php) will be called in a new instance (not the browser window that the user is currently using) - its also called "asynchronous" or "background" i.e. it doesn't interrupt what the user is doing (in a nutshell).

AJAX is pretty easy to get your head around, basically its like javascript is sending a form itself, rather than the user doing it.

In the ajax() jquery function there are some callback functions.

The one you want is called success: and it can look like this:

success: function(data){ alert("Your message has been sent!"); }

That will display an alert when the php script is run and the javascript calls back.

Hth

Submit form to php using jquery

2 Answers2