Passing form values through AJAX to php

Question

I'm having some real trouble getting this form to send through Ajax. I started off getting the values to send through but came to a stop once the radio button var messagetype was added. Since adding the variable the page no longer passes any of the values through where as before it would pass them.

I believe it has something to do with the var dataString and the values are not passing through properly, and as it started to go wrong since added var messagetype it must have started from here.

I've played around with the code for var messagetype by adding a class and trying that, writing it a few ways but still to no avail.

Here's my code:

js

$('#formsend').click(function(){

var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
//Where I think it's going wrong:
var messagetype = $("input[name='messagetype']:checked").val();

var trackurl = $("input#trackurl").val();
var trackdesc = $("input#trackdesc").val();

var eventdate = $("input#eventdate").val();
var eventdesc = $("input#eventdesc").val();
var adrsone = $("input#adrsone").val();
var adrstwo = $("input#adrstwo").val();
var adrsthree = $("input#adrsthree").val();
var pcode = $("input#pcode").val();

var detail = $("input#subject").val();
var note = $("input#note").val();


  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone +'&messagetype=' + messagetype + '&trackurl=' + trackurl + '&trackdesc=' + trackdesc + '&eventdate=' + eventdate + '&eventdesc=' + eventdesc + '&adrsone=' + adrsone + '&adrstwo=' + adrstwo + '&adrsthree=' + adrsthree + '&pcode=' + pcode + '&detail=' + detail + '&note=' + note;


$.ajax({
  type: "POST",
  url: "processmail.php",
  data: dataString,
  success: function() {
    $('#form').html("<div id='message'></div>");
    $('#message').html("<h2>Message Submitted.</h2>")
    .append("<p>Thank you for contacting me, I will be in touch soon.</p>")
    .hide()
    .fadeIn(1500);
  }
});
return false;

}); //end form ajax

processmail.php

<?php
$name=sanitiseString($_POST['name']);
$email=sanitiseString($_POST['email']);
$phone=sanitiseString($_POST['phone']);

$messagetype=sanitiseString($_POST['messagetype']);

$trackurl=sanitiseString($_POST['trackurl']);
$trackdesc=sanitiseString($_POST['trackdesc']);

$eventdate=sanitiseString($_POST['eventdate']);
$eventdesc=sanitiseString($_POST['eventdesc']);
$adrsone=sanitiseString($_POST['adrsone']);
$adrstwo=sanitiseString($_POST['adrstwo']);
$adrsthree=sanitiseString($_POST['adrsthree']);
$pcode=sanitiseString($_POST['pcode']);

$detail=sanitiseString($_POST['detail']);
$note=sanitiseString($_POST['note']);

$to='emailme@myemail.com';
$subject='Message from Form: '.$messagetype;
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .='From: '.$name;
$headers .='Reply-To: '.$email;

if($messagetype == 'track'){
$message='<table>
        <tr><td>Name: </td><td>'.$name.'</td></tr>
        <tr><td>Email: </td><td>'.$email.'</td></tr>
        <tr><td>Track Description: </td><td>'.$trackdesc.'</td></tr>
        <tr><td>Track Link: </td><td>'.$trackurl.'</td></tr>
        <table>';

}
elseif($messagetype == 'event'){
$message='<table>
        <tr><td>Name: </td><td>'.$name.'</td></tr>
        <tr><td>Email: </td><td>'.$email.'</td></tr>
        <tr><td>Event Description: </td><td>'.$eventdesc.'</td></tr>
        <tr><td>Event Date: </td><td>'.$eventdate.'</td></tr>
        <tr><td>Location: </td><td>'.$adrsone.'</td></tr>
        <tr><td>&nbsp;</td><td>'.$adrstwo.'</td></tr>
        <tr><td>&nbsp;</td><td>'.$adrsthree.'</td></tr>
        <tr><td>&nbsp;</td><td>'.$pcode.'</td></tr>
        <table>';

}
elseif($messagetype == 'message'){
$message='<table>
        <tr><td>Name: </td><td>'.$name.'</td></tr>
        <tr><td>Email: </td><td>'.$email.'</td></tr>
        <tr><td>Subject: </td><td>'.$detail.'</td></tr>
        <tr><td>Message: </td><td>'.$note.'</td></tr>
        <table>';

}

    mail($to, $subject, $message, $headers);



function sanitiseString($var)
{
$var = stripslashes($var);
$var = htmlentities($var);
$var = strip_tags($var);
return $var;    
}
?>

I am new to this and have followed a few tutorials to achieve it so am now a little stuck as to why it won't work.

Any help would be greatly appreciated.

Answer 1

use serialize() or SerializeArray

var dataString = $('#FORMID').serialize();

and pass dataString to your data variable in $.ajax in data

& in php Section you can get all values of fields present inside form

using GET or POST method

messagetype set hidden field in your form or append it to dataString so you will get messagetype in your php file

Answer 2

Try to use object for data param.

$.ajax({
  type: "POST",
  url: "processmail.php",
  data: {'name': name, 
        'email': email},
  success: function() {
    $('#form').html("<div id='message'></div>");
    $('#message').html("<h2>Message Submitted.</h2>")
    .append("<p>Thank you for contacting me, I will be in touch soon.</p>")
    .hide()
    .fadeIn(1500);
  }
});