Замена alert
Здравствуйте,
Возникла необходимость создать на сайте форму обратной связи. Нашел скрипт, работает, но немного не так как хотелось бы. При нажатии на "отправить" вываливается модальное окно, причем страница не обновляется и при нажатии ОК отправляется письмо на почту, а весь контекст остается в формах. Т.е можно еще раз нажать "отправить" и письмо отправится еще раз. Так вот вопрос, как при удачной отправке сообщения сделать так,чтобы <div> с формами заменялся на <div> с текстом "Отправлено!"? $(document).ready(function() { // вся магия после загрузки страницы $("#ajaxform").submit(function(){ // перехватываем все при событии отправки var form = $(this); // запишем форму, чтобы потом не было проблем с this var error = false; // предварительно ошибок нет form.find('input, textarea').each( function(){ // пробежим по каждому полю в форме if ($(this).val() == '') { // если находим пустое alert('Заполните поле "'+$(this).attr('placeholder')+'"!'); // говорим заполняй! error = true; // ошибка } }); if (!error) { // если ошибки нет var data = form.serialize(); // подготавливаем данные $.ajax({ // инициализируем ajax запрос type: 'POST', // отправляем в POST формате, можно GET url: 'gogogo.php', // путь до обработчика, у нас он лежит в той же папке dataType: 'json', // ответ ждем в json формате data: data, // данные для отправки beforeSend: function(data) { // событие до отправки form.find('input[type="submit"]').attr('disabled', 'disabled'); // например, отключим кнопку, чтобы не жали по 100 раз }, success: function(data){ // событие после удачного обращения к серверу и получения ответа if (data['error']) { // если обработчик вернул ошибку alert(data['error']); // покажем её текст } else { // если все прошло ок alert('Письмо отвравлено! Чекайте почту! =)'); // пишем что все ок } }, error: function (xhr, ajaxOptions, thrownError) { // в случае неудачного завершения запроса к серверу alert(xhr.status); // покажем ответ сервера alert(thrownError); // и текст ошибки }, complete: function(data) { // событие после любого исхода form.find('input[type="submit"]').prop('disabled', false); // в любом случае включим кнопку обратно } }); } return false; // вырубаем стандартную отправку формы }); }); блок с формами Код:
<div id="fields"> |
Тебе код написать или подсказать как сделать? Предположим что подсказать, повешай на success событие, котороое будет скрывать форму (#ajaxform).hide(), и добавь блок с сообщением <div id="success" style="display:none;"> Спасибо, ваще сообщение отправлено</div>, на него вешай событие (#success).show();
|
success: function(data){ if (data['error']) { // если обработчик вернул ошибку alert(data['error']); // покажем её текст } else { // если все прошло ок $('#ajaxform').hide(); // скрываем форму $('#success').show(); //показываем сообщение об успешной отправке } |
Часовой пояс GMT +3, время: 16:00. |