Я использую простую контактную форму: http://luiszuno.com/previews/formy/
и проблема в том, что всякий раз, когда персонаж «&»набирается в форме остальной части сообщения после»&»не получен по электронной почте. Редактировать: добавлен код, форма работает правильно, кроме проблемы отсутствующих данных. Что может быть причиной этой проблемы?
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;
});
отправить-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);
}
?>
Ваша проблема в том, что вы строите строку данных вручную, а не кодируете URI значений данных, которые вы вставляете в строку. Поэтому любой сырой &
символ в вашем тексте будет считаться частью URI, а не данных, а это означает, что он будет интерпретироваться как указывающий начало следующего параметра, а не просто как символ в тексте. URI-кодирование этих данных преобразует этот и другие специальные символы в их закодированные эквиваленты, поэтому они не будут неверно интерпретированы.
Теперь вы, безусловно, можете это исправить, обернув каждую переменную поля encodeURIComponent()
, но это многословно и нудно
var dataString = 'name=' + encodeURIComponent(name)
+ '&email=' + encodeURIComponent(email)
+ '&comments=' + encodeURIComponent(comments)
+ '&to=' + encodeURIComponent(to)
+ '&from=' + encodeURIComponent(from)
+ '&budget=' + encodeURIComponent(budget)
+ '&subject=' + encodeURIComponent(subject);
Есть лучшие способы:
В настоящее время ваш $(this).serialize();
не будет работать, потому что this
представляет нажатую кнопку, а не форму. Однако, если вы укажете на форму, вы можете использовать ее для автоматической сериализации полей внутри нее, и jQuery будет решать любые проблемы кодирования от вашего имени. Это экономит ручное кодирование и код для выборки каждого значения поля по отдельности (хотя я отмечаю, что в настоящее время это необходимо для проверки, хотя существуют другие способы реализации проверки, которые устранят эту потребность, но это совсем другая тема).
$.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
});
Как вы можете видеть, это намного меньше хлопот. И если в будущем вы добавите больше полей в форму, вам вообще не придется менять этот бит кода.
Еще один побочный момент — вы столкнетесь с большими трудностями при проверке ввода формы с использованием JavaScript. Это приятно и удобно, но не обеспечивает никакой безопасности. На стороне сервера вы, кажется, с радостью вставляете любые значения, которые браузер отправляет прямо в вашу электронную почту. Любой пользователь с небольшим количеством знаний может либо изменить свой JavaScript с помощью своих инструментов разработчика, либо отключить JS, либо просто полностью использовать другой инструмент (например, PostMan или пользовательское приложение) для запуска HTTP-запросов на вашем сервере, даже не касаясь вашей формы. , Они могут потенциально отправлять проблемные значения, которые могут испортить вашу электронную почту — например, другое значение «from» или какой-нибудь неприятный HTML, или если вы взаимодействуете с базой данных где-либо в вашем приложении, выполните SQL-инъекции, чтобы испортить это. Вам следует всегда проверьте все входящие данные в вашем PHP-коде на предмет проблем безопасности и убедитесь, что они соответствуют вашим бизнес-правилам, прежде чем использовать их для чего-либо еще.
Использование encodeURIComponent (), как рекомендовано @ADyson, исправило недостающие данные / URL-адреса из полученного электронного письма при использовании контактной формы.
var comments = $("#comments").val();
var e_comments = encodeURIComponent(comments);