Вывод html в alert после отправки формы

269

19 декабря 2016, 19:29

Есть форма обратной связи, у которой есть кнопка на которую навешано событие отправки письма на почту, после нажатия. Проблема в том, что после заполнения формы появляется всплывающие окно внутри которого вместо строки "Письмо отправлено. Ждите ответа" появляется весь html код страницы. Сайт написан на wordpress. Подскажите как исправить.

$(document).ready(function(){
$('input#name-send, input#tel-send').unbind().blur( function(){
    $('[data-toggle="popover"]').popover(); 
    var id = $(this).attr('id');
    var val = $(this).val();
    switch(id)
    {
        // Проверка поля "Имя"
        case 'name-send':
            var rv_name = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение
            if(val.length >= 2 && val != '' && rv_name.test(val))
            {
                $("#name-send").addClass('not_error');
                $(this).removeClass('error')
            }
            else
            {
                $("#name-send").removeClass('not_error')
                $(this).addClass('error');
            }
            break;
           // Проверка tel
        case 'tel-send':
            var rv_tel =  /^((8|\+7)[\- ]?)?(\(?\d{3,4}\)?[\- ]?)?[\d\- ]{5,10}$/;
            console.log(id);
            if(val != '' && rv_tel.test(val))
            {
                $("#tel-send").addClass('not_error');
                $(this).removeClass('error')
            }
            else
            {
                $("#tel-send").removeClass('not_error')
                $(this).addClass('error');
            }
           break;   
       } // end switch(...)
     }); // end blur()
    // Теперь отправим наше письмо с помощью AJAX
    $('form#feedback-form-send').submit(function(e){
        // Запрещаем стандартное поведение для кнопки submit
        e.preventDefault();
        if($("#name-send").val()==="" && $("#tel-send").val()===""){
            $("#name-send,#tel-send").css('border','2px solid red');
        }
        if($("#name-send,#tel-send").hasClass('error')) {
            $("#name-send,#tel-send").css('border','2px solid red');
        }
        else if($("#name-send,#tel-send").hasClass('not_error')) {
            $("#name-send,#tel-send").css('border','2px solid green');
        }
        if($('.not_error').length == 2)
        {  
            $.ajax({
                url: 'controller/form.php',
                type: 'post',
                data: $(this).serialize(),
                beforeSend: function(xhr, textStatus){ 
                    $('form#feedback-form-send :input').attr('disabled','disabled');
                },
                success: function(response){
                    $('form#feedback-form-send :input').removeAttr('disabled');  
                    alert(response);
                }
            }); // end ajax({...})
        }
        else
        {
          return false;
        }
}); // end submit()
}); // end script

Файл form.php

<?php
if((isset($_POST['name-send']) && $_POST['name-send']!="") && (isset($_POST['tel-send']) && $_POST['tel-send']!="")){
$name = trim(htmlspecialchars(stripslashes(strip_tags($_POST['name-send']))));
$tel =  trim(htmlspecialchars(stripslashes(strip_tags($_POST['tel-send']))));
$to = "mail@mail.ru";
$subject = "От поситителя сайта";
$text =  "Написал(а): $name\n Контактный телефон - $tel\n\n";
$header  = "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/plain; charset=utf-8\r\n";
$sending = mail($to, $subject, $text, $header);
if($sending) echo "Письмо отправлено. Ждите ответа";
}
?>

Файл .htaccess

# BEGIN WordPress 
<IfModule mod_rewrite.c> 
 RewriteEngine On 
 RewriteBase / 
 RewriteRule ^index\.php$ - [L] 
 RewriteCond %{REQUEST_FILENAME} !-f 
 RewriteCond %{REQUEST_FILENAME} !-d 
 RewriteRule . /index.php [L] 
</IfModule> 
# END WordPress 
<Files beget,info> order allow,deny deny from all </Files>

Answer 1

Если письмо с формы приходит на почту то попробуйте так:

success: function(response){
                    $('form#feedback-form-send :input').removeAttr('disabled');  
                    alert('Письмо отправлено. Ждите ответа');
                }

так как "success:" означает действие при удачном аджакс запросе. и добавь еще строку: "error: function(er){alert(er)}," данная строчка выведет сообщение об ошибке в случае неудачного аджакс запроса. Получится такой такой запрос:

$.ajax({
                url: 'controller/form.php',
                type: 'post',
                data: $(this).serialize(),
                beforeSend: function(xhr, textStatus){ 
                    $('form#feedback-form-send :input').attr('disabled','disabled');
                },
                success: function(response){
                    $('form#feedback-form-send :input').removeAttr('disabled');  
                    alert('Письмо отправлено. Ждите ответа');
                },
                error: function(er){alert(er)},        
            });

также вместо "alert(er)" можно прописать "alert('Произошла ошибка! Письмо не отправлено.')"

Answer 2

В вордпресс для реализации ajax-ответа лучше использовать механизм, предусмотренный для этой задачи самой CMS:

В файле темы functions.php определяете функцию обработки ajax-запроса:

function myAjaxFunc() {
    /* здесь код для вашей функции*/
    wp_die();
}
add_action('wp_ajax_nopriv_myAjaxFunc', 'myAjaxFunc');
add_action('wp_ajax_myAjaxFunc', 'myAjaxFunc');

В качестве url для ajax-запроса указывается файл, находящийся по адресу /wp-admin/admin-ajax.php, в качестве action - имя зарегистрированной функции-обработчика myAjaxFunc

Answer 3

Оффтоп: правильно пишется "посетитель"

По сути вопроса сложно сказать. Но так как это wordpress то вероятней всего ваш PHP скрипт не отрабатывает, а вместо него запускается сам вордпресс. Было бы полезно увидеть содержимое файла .htaccess

В качестве мер решения вопроса, я бы порекомендовал указать путь до скрипта относительно корня сайта. Т.е.

url: '/controller/form.php'

А в конец скрипта добавить exit

if($sending) echo "Письмо отправлено. Ждите ответа";
exit();

И еще небольшой оффтоп: а если вдруг письмо не получится отправить и функция mail вернет false? В этом случае пользователь увидит пустой alert. Что тоже не совсем правильно.