How to send data to a PHP email script with AJAX or JSON

Question

I'm completely lost here. I want to send an email with PHP without leaving my page. But I can't figure out how to get the data to the PHP file to email it. And when I do get it there, I would be lost. So any help with what the PHP file should look like would be great too. Here is the form.

<table id="dialog">
        <tr><td><input type="text" id="name" name="name" placeholder="Your Name" size="20" class="tbow" /></td></tr>
        <tr><td><input type="text" id="email" name="email" placeholder="Your Email" size="20" class="tbow" /></td></tr>
        <tr><td><input type="text" id="number" name="number" placeholder="Your Phone Number" size="20" class="tbow" /></td></tr>
        <tr><td><textarea id="message" name="message" rows="5" cols="25" class="tbow" placeholder="Your Message"></textarea></td></tr>
        <tr><td><input type="button" value="Send!" onclick="senem();" id="sender" /></td></tr>
</table>

And I've tried this...

function senem(){
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var number = document.getElementById("number").value;
        var message = document.getElementById("message").value;
        $.ajax({
            type: "POST",
            url: "mmaa.php",
            data: "name=" + name + "&email=" + email + "&number=" + number = "&message=" + message,
            success: alert("It works!!!");
        });
 }

[What have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) — PeeHaa, Apr 22 '12 at 00:59
function senem(){ var name = document.getElementById("name").value; var email = document.getElementById("email").value; var number = document.getElementById("number").value; var message = document.getElementById("message").value; $.ajax({ type: "POST", url: "mmaa.php", data: "name=" + name + "&email=" + email + "&number=" + number = "&message=" + message, success: alert("It works!!!"); }); } — Tanner Ellis, Apr 22 '12 at 01:02
Please update your question with this code for readability :-) — PeeHaa, Apr 22 '12 at 01:02
working solution here http://stackoverflow.com/questions/19029703/jquery-using-ajax-to-send-data-and-save-in-php/19029778#19029778 — rohitcopyright, Sep 26 '13 at 16:19

lynks · Accepted Answer · 2012-04-22T01:09:19.657

Not intended as a copy-and-paste job, but should give you the building blocks to write it yourself:

Your javascript function;

function senem() {
    jQuery.ajax({
        type: "POST",
        url: "http://location/of/script.php",
        data: { var1: "foo", var2: "bar" },
    });
}

and in the php;

<?php
    $var1 = $_POST['var1'];
    $var2 = $_POST['var2']; //do something interesting with these

    $to = "john@example.com";
    $subject = "Wooo Email!";
    $message = "Sorry John, you're fired.";

    mail($to, $subject, $message, "From: system@yourdomain.com\r\n");
?>

The values of var1 and var2 you will probably want to assign clientside, using jQuery (eg $("#name").val(); ) and you will also need to install and configure an SMTP server alongside Apache (use Exim, and find a friendly geek to help you).

PS: the \r\n is because SMTP shares some syntax with HTTP, it's not important, but the mail command probably won't work without them.

@TannerEllis, if it works, you should probably accept the answer so that other users can find it easily :) — citruspi, Apr 22 '12 at 02:36

score 1 · Answer 2 · answered Apr 22 '12 at 01:06

I will remove the onlick event from button and do it an unobtrusive way

<input type="button" value="Send!" id="sender" />

Script

$(function(){

 $("#sender").click(function(){
    $.post("yourserver.php", 
                          { name: $("#name").val(),
                            email:$("#email").val(),
                            number : $("#number").val(), 
                            message=$("#message").val()
                          },
                         function(result){
                            //Show the result from server page to the user. 
                            alert(result)
                         });    
  });
});

Have your php page accepts this values and then do send the email after proper validation. You may respond some message back ( "Ex : Email sent") and that will be available in the result variable.

Make sure you have jQuery library loaded to your page.

Read this pages for better understanding of how jQuery post works http://api.jquery.com/jQuery.post/

@RepWhoringPeeHaa : Seperate behaviour from markup. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — Shyju, Apr 22 '12 at 01:09
Eeeek what idiot came up with that term for functionality and presentation separation ;-) — PeeHaa, Apr 22 '12 at 01:10

How to send data to a PHP email script with AJAX or JSON

2 Answers2

Linked