POST contact form missing data when special character is used - php

Question

I am using a simple contact form: http://luiszuno.com/previews/formy/
and the issue is that whenever the character "&" is typed on the form the rest of the message after "&" is not received on the email. Edit: Added the code, form works correctly other than the missing data issue. What could be causing this issue?
jQuery(document).ready(function($) {
$("#formy").on( "submit", function( event ) {
$(this).serialize();
});
// Hide messages
$("#formy-success").hide();
$("#formy-error").hide();
$("input,textarea").blur(function(){
$(this).css("border-color","#596a87");
});
// on submit...
$("#formy #submit").click(function() {
$(this).serialize();
// Required fields:
//name
var name = $("#name").val();
if(name == "" || name == "Name *"){
$("#name").focus();
$("#formy-error").fadeIn().text("Name required");
$("#name").css("border-color","#a22528");
return false;
}
else {$("#name").css("border-color","#596a87");}
// email
var email = $("#email").val();
if(email == "" || email == "Email *"){
$("#email").focus();
$("#formy-error").fadeIn().text("Email required");
$("#email").css("border-color","#a22528");
return false;
}
else {$("#email").css("border-color","#596a87");}
// email validation
function validateEmail(email) {
var filter = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return filter.test(email);
}
if (!validateEmail(email)) {
$("#formy-error").fadeIn().text("Invalid email address");
$("#email").css("border-color","#a22528");
return false;
}
//budget
var budget = $("#budget").val();
if(budget == "" || budget == "Budget"){
return false;
}
// comments
var comments = $("#comments").val();
if(comments == "" || comments == "Message *"){
$("#comments").focus();
$("#formy-error").fadeIn().text("Message required");
$("#comments").css("border-color","#a22528");
return false;
}
else {$("#comments").css("border-color","#596a87");}
// send mail php
var sendMailUrl = $("#sendMailUrl").val();
// Retrieve values for to, from & subject at the form
var to = $("#to").val();
var from = $("#from").val();
var subject = $("#subject").val();
// Create the data string
var dataString = 'name=' + name
+ '&email=' + email
+ '&comments=' + comments
+ '&to=' + to
+ '&from=' + from
+ '&budget=' + budget
+ '&subject=' + subject;
// ajax
$.ajax({
type:"POST",
url: sendMailUrl,
data: dataString,
success: success()
});
});
// On success...
function success(){
$("#formy-success").fadeIn(250).text("Thanks, I will contact you soon!");
$("#formy-error").hide();
$("#formy fieldset").slideUp(250);
}
return false;
});
send-mail.php
<?php header("Content-Type: text/html; charset=utf-8");
//vars
$subject = $_POST['subject'];
$to = explode(',', $_POST['to'] );
$from = $_POST['email'];
//data
$msg = "NAME: " .$_POST['name'] ."<br>\n";
$msg .= "EMAIL: " .$_POST['email'] ."<br>\n";
$msg .= "BUDGET: " .$_POST['budget'] ."<br>\n";
$msg .= "COMMENTS: " .$_POST['comments'] ."<br>\n";
//Headers
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
$headers .= "From: <".$from. ">" ;
//send for each mail
foreach($to as $mail){
mail($mail, $subject, $msg, $headers);
}
?>

Answer 1

Your problem is that you are building your data string manually and not URI-encoding the data values you insert into the string. Therefore any raw & character in your text will be assumed to be part of the URI and not the data, meaning that it will be interpreted as indicating the start of the next parameter, rather than just a character in the text. URI-encoding this data will convert this and other special characters into their encoded equivalents, so they will not be mis-interpreted.
Now, you can certainly fix this by wrapping every field variable with encodeURIComponent(), but this is verbose and tedious:
var dataString = 'name=' + encodeURIComponent(name)
+ '&email=' + encodeURIComponent(email)
+ '&comments=' + encodeURIComponent(comments)
+ '&to=' + encodeURIComponent(to)
+ '&from=' + encodeURIComponent(from)
+ '&budget=' + encodeURIComponent(budget)
+ '&subject=' + encodeURIComponent(subject);
There are better ways:
Currently, your $(this).serialize(); will not work because this represents the clicked button, not the form. However if you point it at the form, you can use it to easily serialise the fields within it automatically, and jQuery will handle any encoding issues on your behalf. This saves on manual encoding, and on code to fetch each field value individually (although I note you currently need this for your validation, although there are other ways to implement validation which would remove that need, but that's another topic entirely).
$.ajax({
type:"POST",
url: sendMailUrl,
data: $("#formy").serialize(),
success: success //Unrelated: I also removed the brackets here, so it becomes a _reference_ to the "success" function - writing success() as you did means the function is immediately executed, and what gets passed to jQuery is the _result_ of the function, which isn't what you want in this case
});
As you can see this is much less hassle. And if you ever add more fields to your form in future, you won't have to change this bit of code at all.
Another side point - you're going to a lot of trouble to validate the form input using JavaScript. This is nice and user-friendly, but it provides no security whatsoever. On the server side you appear to be happily inserting whatever values the browser sends directly into your email. Any user with a small amount of knowledge can either modify your JavaScript with their developer tools, or turn off JS, or just use another tool entirely (e.g. PostMan, or a custom application) to fire HTTP requests at your server without ever touching your form. They could potentially send problematic values which might screw up your email - e.g. a different "from" value, or some nasty HTML, or if you're interacting with a database anywhere in your application, carry out SQL Injection attacks to mess that up. You should always validate all incoming data in your PHP code for security issues, and to ensure it meets your business rules, before using it for anything else.

Answer 2

Using the encodeURIComponent() as #ADyson recommended fixed the missing data/urls from received email when using the contact form.
var comments = $("#comments").val();
var e_comments = encodeURIComponent(comments);