Question

I’m trying to handle a php mailform with ajax. It’s a simple form that sends a message to my e-mail with the users phonenumber etc.

I’m not experienced with php at all but I got it to send me mail using a regular submit and then returning to the index page.

As this does not provide any feedback to the user this isn’t working for me. I’ve found some examples using JQuery. I’ve also seen people using both GET and POST. I’m confused now how I should proceed.

The JQuery version of what I’m trying to achieve would look similar to this I guess.

var dataString = 'name='+ name + '&email=' + email + '&message=' + message;

$.ajax({
  type: "POST",
  url: "mail.php",
  data: dataString,
  success: function() {
    $('#myForm').html("<div id='response'></div>");
    $('#response').html("<h2>Contact Form Submitted!</h2>");
  }
});

<?php
$mail = $_POST['email '];
$name = $_POST['name'];
$subject = 'new submit';
$text = $_POST['message'];
$to = “[e-mail]”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;
mail($to, $subject,$message)
?>

Answer 1

Solved it like this:

<form id="form" method="post" name="mailform" action="mail.php" onsubmit="mail(); return false;">
    <p>
        <label for='name'>Stuff</label><br>
        <input type="text" name="stuff">
    </p>
    <input type="submit" name="submit" value="Send">
</form>
<p id="result" style="display: none">
<img src="images/succes.png"><br>
Thank you
</p>

/*----------------------------*/

function mail() {
var form = document.getElementById("form");
var name = form.name.value; 
var email = form.email.value; 
var phone = form.phone.value; 
var message = form.message.value; 
var valid = true;

if (!name) {form.name.style.backgroundColor = '#FF9481'; valid = false; }
else {form.name.style.backgroundColor = '';}
if (!email && !phone) {form.email.style.backgroundColor = '#FF9481'; form.phone.style.backgroundColor = '#FF9481'; valid = false;}
else {form.email.style.backgroundColor = ''; form.phone.style.backgroundColor = '';}
if (!message) {form.message.style.backgroundColor = '#FF9481'; valid = false;}
else {form.message.style.backgroundColor = '';}
if (email) {
    var patt=/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;
    var result=patt.test(email);
    if (!result) {form.email.style.backgroundColor = '#FF9481'; valid = false;}
    else form.email.style.backgroundColor = '';
    }
if (phone) {
    var patt=/[^0-9|\-| ]/g;
    var result=patt.test(phone);
    if (result) {form.phone.style.backgroundColor = '#FF9481'; valid = false;}
    else form.phone.style.backgroundColor = '';
    }
if (!valid) return false;

var datastr = 'name='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            if (xmlhttp.responseText == "ok") {
            form.style.display = 'none';
            document.getElementById("result").style.display = '';
            }
            else {
            form.message.value= "That doesn't seem right";
            }       
        }
  }
xmlhttp.open("GET","mail.php?" + datastr,true);
xmlhttp.send();
}

/*----------------------------*/

<?php
$name = $_GET['name'];
$etc...

if(IsInjected($name)||IsInjected($visitor_email)||IsInjected($phone)||IsInjected($message)) 
{
    echo "Something fishy going on?";
    exit;
}

[...]
mail($to,$email_subject,$email_body,$headers);
echo "ok";

function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
?>