Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Использование нестандартного JavaScript и PHP для отправки электронного письма себе, когда пользователь нажимает на кнопку ввода, но работает только в Chrome, IE и Microsoft Edge.

На чтение 8 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Как отправлять электронную почту с помощью пользовательского JavaScript и PHP при нажатии кнопки обновления в браузерах Chrome, IE и Microsoft Edge
  4. Введение
  5. Проблема
  6. Решение
  7. Реализация
  8. PHP Код
  9. Заключение

Вопрос или проблема

Итак, я использую jQuery и PHP вместе, чтобы отправлять себе электронное письмо каждый раз, когда пользователь нажимает кнопку обновления в своей форме Ultimate Member. Однако электронное письмо отправляется только тогда, когда пользователь использует Chrome, IE и Microsoft Edge. При использовании Safari и Firefox это не работает. Я использую слушатель событий на клике, чтобы отправить JSON в свой файл PHP. Изначально JSON был объектом, который был создан функцией, проверяющей различия между двумя разными объектами. Эти объекты были созданы с помощью обхода DOM. В этом файле PHP есть функция mail(), которая отправляет мне упомянутый JSON на мою электронную почту. Я пытался воспроизвести процесс на тестовом сайте и заметил, что когда я не добавлял jQuery, который идет перед моим слушателем клика, электронные письма действительно отправляются из Safari и Firefox. Однако, если я добавляю код jQuery, а ЗАТЕМ удаляю его и тестирую снова, он не отправляется! Это как будто мой сервер отклоняется на постоянной основе. Вот мой JS код:
(function($){

$(document).ready(function(){

console.log('mailajax is enqueued, showing on firefox');

var ogArray = new Array(),
    newArray = new Array(),
    dropOgArray = new Array(),
    dropNewArray = new Array(),
    difference,
    username = $('.um-name').find('a').attr('title');


function diffObject(a, b) {
  return Object.keys(a).reduce(function(map, k) {
    if (a[k] !== b[k]) map[k] = b[k];
    return map;
  }, {});
}

$('input.um-form-field').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).val();

    ogArray[$key] = $value;

});

console.log(ogArray);

setTimeout(function(){

$('span.select2-chosen').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).text();

    // console.log($value);

    dropOgArray[$key] = $value;

});

console.log(dropOgArray);

},1000);



$('input.um-form-field').on('keyup', function(){
    $('form').find('input.um-form-field').each(function() {

        var $key = $(this).closest('.um-field').find('label').text();
        var $value = $(this).val();

        newArray[$key] = $value;

    });

    console.log(newArray);

    console.log(diffObject(ogArray, newArray));

    difference = diffObject(ogArray, newArray);
});

$('select.um-form-field').on('change', function(){
    setTimeout(function(){
        $('form').find('span.select2-chosen').each(function() {

            var $key = $(this).closest('.um-field').find('label').text();
            var $value = $(this).text();

            dropNewArray[$key] = $value;

        });

        console.log(diffObject(dropOgArray, dropNewArray));

        dropDifference = diffObject(dropOgArray, dropNewArray);
    }, 1000);


});


$('.um-profile-body .um-button').on('click', function(e) {

    $('form').on('submit', function(){

        console.log('form was sent successfully');
        var ajaxurl="http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php";
            stringDifference = JSON.stringify(difference);
            stringDropDifference = JSON.stringify(dropDifference);
            stringUsername = String(username);


        $.post(ajaxurl, {'Name': stringUsername, 'Changes Made': stringDifference, 'Drop Down Menu Changes': stringDropDifference});


    });


});


});

})(jQuery);

А вот мой PHP код:

<?php

$message = "Информация о пользователе была изменена\r\n";
$message .= print_r($_POST, true);


$to = "[электронная почта]";
$subject = "Информация о пользователе была изменена!";
$headers = "От: ";

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




?>

Я думаю, что это может быть проблема на сервере, но если у кого-то есть опыт в таких вещах, я буду очень признателен за любую обратную связь или помощь.

Так что оказывается, что на Safari и Firefox страница обновляется до того, как электронное письмо будет отправлено. В качестве обходного решения я просто создал другую кнопку, на которую пользователь должен нажать перед тем, как нажать на настоящую кнопку, которая обновляет информацию его профиля. Обработчик события клика на этой первой кнопке сейчас используется для отправки информации в файл php. Это решило проблему, и теперь я получаю электронные письма независимо от того, в каком браузере пользователь обновляет свой профиль!

Вот javascript:

(function($){

$(document).ready(function(){

// console.log('mailajax is enqueued, showing on firefox');

setTimeout(function(){

if($('html').hasClass('user-section')){
    // console.log('это страница пользователя');
    $('input.um-button').hide();
    $('.um-profile .um-col-alt .um-left.um-half').prepend('<a id="custom-update-btn">Подтвердить изменения</a>');
}


var ogArray = new Array(),
    newArray = new Array(),
    dropOgArray = new Array(),
    dropNewArray = new Array(),
    difference,
    username = String($('.um-name').find('a').attr('title'));

function diffObject(a, b) {
  return Object.keys(a).reduce(function(map, k) {
    if (a[k] !== b[k]) map[k] = b[k];
    return map;
  }, {});
}

$('input.um-form-field').each(function() {

    var $key = $(this).closest('.um-field').find('label').text(),
        $value = $(this).val();

    ogArray[$key] = $value;

});

$('span.select2-chosen').each(function() {

    var $key = $(this).closest('.um-field').find('label').text(),
        $value = $(this).text();


    dropOgArray[$key] = $value;

});



$('input.um-form-field').on('keyup', function(){
    $('form').find('input.um-form-field').each(function() {

        var $key = $(this).closest('.um-field').find('label').text(),
            $value = $(this).val();

        newArray[$key] = $value;

    });

});

$('select.um-form-field').on('change', function(){
    setTimeout(function(){
        $('form').find('span.select2-chosen').each(function() {

            var $key = $(this).closest('.um-field').find('label').text(),
                $value = $(this).text();

            dropNewArray[$key] = $value;

        });

        // console.log(diffObject(dropOgArray, dropNewArray));


    }, 1000);


});



$('a#custom-update-btn').on('click', function(e){
    // console.log('кнопка обновления была нажата');

    var ajaxurl="http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php",
                  stringDifference = JSON.stringify(diffObject(ogArray, newArray)),
                stringDropDifference = JSON.stringify(diffObject(dropOgArray, dropNewArray));       
    $.post(ajaxurl, { 'Name': username, 'Changes Made': stringDifference, 'Drop Menu Changes': stringDropDifference});

    $('a#custom-update-btn').hide();
    $('.um-profile-body .um-button').show();
});

}, 1000);







});

})(jQuery);

.

Ответ или решение

Как отправлять электронную почту с помощью пользовательского JavaScript и PHP при нажатии кнопки обновления в браузерах Chrome, IE и Microsoft Edge

Введение

В условиях, когда необходима обратная связь при изменении пользовательских данных, важно иметь надежное решение для отправки электронной почты при нажатии кнопки обновления на форме пользователей. Однако встречаемая проблема заключается в том, что функция отправки работает только в браузерах Chrome, Internet Explorer и Microsoft Edge, тогда как в Firefox и Safari возникают сбои. В данном руководстве мы разберем возможные причины проблемы и предложим оптимизированное решение.

Проблема

Проблема заключается в том, что нажатие кнопки обновления формы инициирует отправку данных на сервер с помощью jQuery, но при этом происходит обновление страницы, что предотвращает успешную отправку почты в браузерах Firefox и Safari. Это происходит из-за того, что событие submit формы срабатывает до того, как AJAX-запрос успевает выполниться.

Решение

Для решения данной проблемы мы можем использовать подход с предварительным подтверждением изменений через дополнительную кнопку. Это позволяет обеспечить правильное управление процессом отправки данных, предотвращая ненужное обновление страницы. Мы изменим логику JavaScript и используем метод AJAX для отправки данных на сервер.

Реализация

Ваша JavaScript кодировка должна выглядеть следующим образом:

(function($) {
$(document).ready(function(){

    setTimeout(function() {
        if ($('html').hasClass('user-section')) {
            $('input.um-button').hide();
            $('.um-profile .um-col-alt .um-left.um-half').prepend('<a id="custom-update-btn">Approve Changes</a>');
        }

        var ogArray = {};
        var newArray = {};
        var dropOgArray = {};
        var dropNewArray = {};
        var username = String($('.um-name').find('a').attr('title'));

        function diffObject(a, b) {
            return Object.keys(a).reduce(function(map, k) {
                if (a[k] !== b[k]) map[k] = b[k];
                return map;
            }, {});
        }

        // Заполнение исходных данных при загрузке
        $('input.um-form-field').each(function() {
            var $key = $(this).closest('.um-field').find('label').text();
            var $value = $(this).val();
            ogArray[$key] = $value;
        });

        $('span.select2-chosen').each(function() {
            var $key = $(this).closest('.um-field').find('label').text();
            var $value = $(this).text();
            dropOgArray[$key] = $value;
        });

        // Обновление данных при вводе
        $('input.um-form-field').on('keyup', function() {
            $('form').find('input.um-form-field').each(function() {
                var $key = $(this).closest('.um-field').find('label').text();
                var $value = $(this).val();
                newArray[$key] = $value;
            });
        });

        // Обработка изменений выпадающих списков
        $('select.um-form-field').on('change', function() {
            setTimeout(function() {
                $('form').find('span.select2-chosen').each(function() {
                    var $key = $(this).closest('.um-field').find('label').text();
                    var $value = $(this).text();
                    dropNewArray[$key] = $value;
                });
            }, 1000);
        });

        // Отправка данных на сервер по клику на новую кнопку
        $('a#custom-update-btn').on('click', function() {
            var ajaxurl = "http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php";
            var stringDifference = JSON.stringify(diffObject(ogArray, newArray));
            var stringDropDifference = JSON.stringify(diffObject(dropOgArray, dropNewArray));

            $.post(ajaxurl, { 
                'Name': username, 
                'Changes Made': stringDifference, 
                'Drop Down Menu Changes': stringDropDifference 
            });

            $('a#custom-update-btn').hide();
            $('.um-profile-body .um-button').show();
        });

    }, 1000);
});
})(jQuery);

PHP Код

Ваша PHP логика для обработки AJAX запроса останется без изменений, но убедитесь, что вы верно используете метод mail() для отправки почты.

<?php

$message = "User Information has been changed\r\n";
$message .= print_r($_POST, true);

$to = "youremail@example.com"; // Замените на ваш email
$subject = "User Information has been changed!";
$headers = "From: noreply@example.com"; // Укажите ваш адрес отправителя

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

?>

Заключение

Использование дополнительной кнопки для подтверждения изменений значительно упрощает процесс и гарантирует, что данные будут отправлены без сбоев в работе браузеров. Такой подход обеспечивает кроссбраузерную совместимость и улучшает пользовательский опыт. Необходимо соблюдать аккуратность при проектировании форм и обработке событий, чтобы избежать неожиданных ситуаций.

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

email jquery php server
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности