Ajax форма: как изменить информацию браузера: Сообщение успешно отправлено! На блок с изображением скажем?

Question

[sergey]

Есть небольшая ajax форма,все отлично работает, но понадобилось что бы после заполнения полей формы и нажатия submit, появлялся блок: с изображением и текст: Сообщение успешно отправлено!, и через несколько секунд исчезало.

Вот код:

$("#form-1").submit(function() { 
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", 
            data: th.serialize()
        }).done(function() {
            $(".success").addClass("visible");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
                $(".success").removeClass("visible");
            }, 400);
        });
        return false;
    });

    $('.form-1').on('submit', function(){
        if ( $(this).find('input').val() ) {
            alert('Ваш комментарий получен, после проверки модератором он будет размещен на сайте.');
        }
        return false;
    });

<form class="form-1" id="form-1">
            <div class="border__frame">
                <div class="heading">Отправьте <span>заявку!</span></div>
                <div class="description">И наш менеджер перезвонит вам
                    в ближйшее время.</div>
                <input type="text" name="name" maxlength="30" placeholder="Ваше имя" required>
                <input class="index__phone" name="tel" type="tel" maxlength="3" placeholder="123" required>
                <input class="number__phone" name="tel" type="tel" maxlength="7" placeholder="325-54-94" required>
                <button class="btn-submit-mars" type="submit">Отправить заявку на марс</button>
            </div>
        </form>

Как кастомизировать стандартное сообщение браузера об отправке запроса?

Comments

[OVK2015]

Свой div с картинкой и текстом сделать и показывать его. Хотя, как-то не логично получается: о том, что сообщение успешно отправлено вы узнаете только после прихода ответа от сервера, а никак не по нажатию на submit

[sergey]

OVK2015: возможно не правильно выразился, но нужно при отправке формы, вместо убого-го браузерного сообщения - свое, с неким текстом и изображением, но не знаю как это прописать..

[sergey]

OVK2015: вместо этого: alert('Ваш комментарий получен, после проверки модератором он будет размещен на сайте.'); необходимо ссылку на блок...

[sergey]

OVK2015: спасибо, дайте ответ - отмечу как правильный:)

[OVK2015]

Так в чем сложность? В стилях объявляете класс .hiddenDiv{display: none;} Вставляете в HTML блок со всем, что нужно. Добавляете этому блоку класс hiddenDiv. В обработчике submit
$('#popUpMessage').removeClass('hiddenDiv');
setTimeout(5000, function(){$('#popUpMessage').addClass('hiddenDiv');})

[OVK2015]

SM: Не за что

Answer 1

[OVK2015]

В стилях объявляете класс .hiddenDiv{display: none;}
Вставляете в HTML блок со всем, что нужно. Добавляете этому блоку класс hiddenDiv.
В обработчике submit

$('#popUpMessage').removeClass('hiddenDiv');
setTimeout(5000, function(){$('#popUpMessage').addClass('hiddenDiv');})

Comments

[sergey]

а как быть с #popUpMessage, чему этот id присваивается?

[OVK2015]

SM: создаваемому div'у- обертке. Внутри, кот. будет текст, картинка или что там еще нужно

[sergey]

OVK2015: ок, все ок вышло, спасибо еще раз

[OVK2015]

SM: Обращайтесь

[sergey]

OVK2015: смотрите, я форму прячу: $("#form-1").hide(); ну чтобы она не накладывалась с сообщением об отправке, но форма прячеться, а фон поапа нет:)

[sergey]

OVK2015: как его при этом также убирать?

[OVK2015]

SM: Если $("#form-1") это и есть мой div-обертка лучше сразу код целиком покажите,- меньше гадать что к чему буду

[sergey]

OVK2015: вот код обработчика:

$("#form-1").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function() {

            $(".success").addClass("visible");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
                $(".success").removeClass("visible");
            }, 400);

            $("#form-1").hide();

            $('#popUpMessage').removeClass('hiddenDiv');
            setTimeout(function(){
                $('#popUpMessage').addClass('hiddenDiv');
            }, 4000);
        });
        return false;
    });

[sergey]

OVK2015: а форма сама появляется при нажатии кнопки с помощью popup (модальное окно) так вот у него при этом есть фон, вот эго как то надо убрать при прятаньи формы

[sergey]

OVK2015: могу код на jsfiddle закинуть если надо

[OVK2015]

SM: а в живую это где-то есть? без фидля

[sergey]

сек будет, кину ссылку

[sergey]

OVK2015: martynuk.esy.es чуток скролл вниз и появится кнопка в header в самом вверху (пока она только подключена) при клике по ней откроется форма в модальном, ну а дальше увидите

[sergey]

OVK2015: нашел .mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
}
вот оно и дает этот чертов бекграунд

[OVK2015]

SM: Это я заметить успел.
$('.mfp-bg.mfp-ready').css({'display': 'none'}); Правда не понятна зачем этот класс отдельно от формы живет

[sergey]

OVK2015: а заметили что если убрать тот класс, то форму снова вызвать нельзя, без перезагрузки страницы

[OVK2015]

SM: Заметил, что:
1. форма не видна
2. у самой формы остается {'display': 'none'} при клике на эту кнопку-ссылку

[sergey]

OVK2015: и как это обойти?

[OVK2015]

SM: А кликнуть по ней не получается потому, что сама эта кнопка закрыта div`ом mfp-container mfp-s-ready mfp-inline-holder

[OVK2015]

SM:

и как это обойти?

Разобраться с версткой. Какой блок за что отвечает. Когда его показывать/скрывать. Я в них слегка запутался

[sergey]

OVK2015: да вся проблема в том что это не верстка, а плагин popup

[sergey]

OVK2015: сама верстка там форма да и только:)

[sergey]

OVK2015: magnific-popup это зверь зовется и вот он выходит конфликтует при вторичном образовании формы

[OVK2015]

SM: Не конфликтует он. Задумка у вас интересная со ссылкой в качестве кнопки. Повесьте на нее лучше обработчки и в нем убирайте dispaly none у div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready"

[sergey]

OVK2015: можно подробнее а то уже я запутался что и куда вешать?

[OVK2015]

SM: Примерно как я в этой верстке. Попробуйте так:
в
$(document).ready(function(){
...
$('#form-1').bind('click', form1Show);
...
});
...
function form1Show(event)
{
event.preventDefault();
$('#form-1').css({'display': 'block'})
}

[sergey]

OVK2015: вот так теперь у меня выглядит обработчик, но результата не дало

$("#form-1").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function() {

            $(".success").addClass("visible");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
                $(".success").removeClass("visible");
            }, 400);

            $("#form-1").hide();
			$('.mfp-bg.mfp-ready').css({'display': 'none'});

			$('#form-1').bind('click', form1Show);

			function form1Show(event) {
				event.preventDefault();
				$('#form-1').css({'display': 'block'})
			}


            $('#popUpMessage').removeClass('hiddenDiv');
            setTimeout(function(){
                $('#popUpMessage').addClass('hiddenDiv');
            }, 4000);
        });
        return false;
    });

[OVK2015]

SM: 2 момента:
1. я выше писал подвязывать этот обработчик надо в $(document).ready...., а не внутри ответа ajax.
2. $('#form-1').bind('click', form1Show); Здесь #form-1 это id ссылки, а не формы. Т.е., добавьте этой ссылке-кнопке уникальный id

[sergey]

OVK2015: хорошо, а чего мы этим добьемся, ведь присвоив кнопке-ссылке display: block; она просто сдвинется с места и все

[sergey]

OVK2015: а нельзя просто тупо обновить страницу, и все?

[OVK2015]

SM:
хорошо, а чего мы этим добьемся, ведь присвоив кнопке-ссылке display: block; она просто сдвинется с места и все
Этого я точно не говорил. Говорил про присвоение ее уникального(отличного от формы) id.
а нельзя просто тупо обновить страницу, и все?
Можно, конечно. Но это как-то уж совсем радикально. Хотя... Нет, можно еще юзеру предложить браузер для верности переставить)

[sergey]

OVK2015: ну тогда я вас неверно понял, ведь вот это меня натолкнуло на такую мысль $('#form-1').css({'display': 'block'})

[OVK2015]

SM: Вот поэтому и говорю об уникальных id для ссылки, формы. Чтоб не путать их. Кстати ссылок таких на странице 2 штуки

[sergey]

OVK2015: ну ок, тогда вот так оно должно выглядеть?

$(document).ready(function(){
$('#btn-submit').bind('click', form1Show);
});

function form1Show(event)
{
event.preventDefault();
$('#form-1').css({'display': 'block'})
}

[OVK2015]

SM: Если #btn-submit это id ссылки, а #form-1,- это id формы,- то да.

[sergey]

OVK2015: да

[sergey]

OVK2015: алилуя, все ок, огромное спасибо Вам.

[OVK2015]

SM:
Не за что. Никому только не показывайте,- сглазят!

[sergey]

OVK2015: :))) ок договорились

[sergey]

OVK2015: такая мысль пришла: мы вешаем обработчик на кнопку-ссылку, а ведь пользователь об этом еще должен догадаться, ну что бы обратно кликнуть на нее, а не проще вместо кнопки указать body, и тогда любой клик по экрану приведет кнопки в рабочее состояние. Можно так поступить или так не делают?

[OVK2015]

SM:
об этом еще должен догадаться, ну что бы обратно кликнуть на нее
Вот этого я не понял. Зачем на нее еще раз кликать? Еще один заявку создать?

Посмотрел сейчас на сайт. Там все равно не до конца закрытие работает. Заполнил форму.,-отправил. Увидел окошко "Наши поздравления". Дождался его закрытия. Дальше пробую еще раз на ту же "Отправить заявку..." кликнуть. Она закрыта div mfp-container mfp-s-ready mfp-inline-holder. Этот 1-ый на нее клик убирает делает этот див не видимым. И только со второго клика открывается форма заявки.
Распишите, что здесь что делает в вашем понимании:

$("#form-1").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function() {

            $(".success").addClass("visible");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
                $(".success").removeClass("visible");
            }, 400);

            $("#form-1").hide();
            $('.mfp-bg.mfp-ready').css({'display': 'none'});


            $('#popUpMessage').removeClass('hiddenDiv');
            setTimeout(function(){
                $('#popUpMessage').addClass('hiddenDiv');
            }, 4000);
        });
        return false;
    });

[sergey]

OVK2015: с помощью ajax делаем запрос, получаем ответ, если все ок, то: очищаем форму, прячем форму, блокирующий слой и выводим сообщение, все.

[OVK2015]

SM: Ясно. Есть у меня подозрение на счет Magnific Popup. Он когда инициализируется,- добавляет доп. эл-ты обертки. Вот и думаю почему бы его тогда не открывать/закрывать через его же методы? Так бы он сам за собой хвосты подчищал. Мне кажется,- "блокирущие слои" это оттуда