В контактной форме POST отсутствуют данные при использовании специального символа

Question

Я использую простую контактную форму: 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;
});

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

Ваша проблема в том, что вы строите строку данных вручную, а не кодируете 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-коде на наличие проблем безопасности и убедиться, что они соответствуют вашим бизнес-правилам, прежде чем использовать их для чего-либо еще.

Answer 2

Использование метода encodeURIComponent (), рекомендованного @ADyson, исправило недостающие данные / URL-адреса из полученного электронного письма при использовании контактной формы.

var comments = $("#comments").val();
var e_comments = encodeURIComponent(comments);