Как создать всплывающую форму с отправкой без обновления страницы (Ajax). Например, форма ОБРАТНЫЙ ЗВОНОК

Как создать всплывающую форму с отправкой без обновления страницы (Ajax)?

1. В редакторе форм нажмите "Добавить форму".
   • Название формы, например "Обратный звонок".
   • Method: POST
   • Enctype: multipart/form-data
   • Резултьтат при отправке на внутренний адрес: Отправить результат на почту
   • Адрес отправки формы: #
   • Имя формы:form_callback_request
   • ID формы:form_callback_request
   • Заполните остальные данные по вашему пожеланию, кроме "Поля для формы", которые мы заполним после сохранения формы.
   
   После сохранения перейдите в "Мои формы" и откройте созданную форму для редактирования.
   Поля для формы, Добавить еще поле.
   Выберите "Текстовое поле", Добавить еще поле.
   • Название: "Телефон:"
   • Placeholder: "Ваш номер телефона"
   • Name: "callback_phone_name"
   • ID: "callback_phone_id"
   • Class: "callback_phone_class"
   • Maxlength: 15
   • Size: 20
   • Текст при ошибке: "Вы не указали номер телефона"
   • Заполнять: Обязательно для заполнения
   • Проверка на соответствие: Номер телефона
   • Сохраните изменения
2. Добавим код для открытия меню при нажатии на ссылку. Для этого откройте "Управление меню", "Добавить меню".
• Имя: "callback_menu"
• Заголовок: "Обратный звонок код"
• Положение меню: "Шапка сайта (Header)"
• Введите текст меню, отключив HTML редактор:
  <script type="text/javascript"> <!-- $(function() { //Загрузка формы START $(".hotengine-form-constructor").click(function(){ $(this).append('<div id="dialog_form_constructor"></div>'); var rel; var rel = $(this).attr("rel"); $("#dialog_form_constructor").dialog({ open: function () { if($(this).text() == ''){ $(this).append('<div class="loading" align="center"><img src="/img/loading.gif"/></div>'); $(".loading").animate({opacity: "show"}, 400); $(this).load("/codes/form/template_form_construct_ajax.php?form="+rel+"", function() { $(".loading").hide("fast", function () { $(".loading").remove(); }); }); }; }, width: 335, height: 225, modal: true, title: "Отправить запрос", buttons:{ "Закрыть": function() { $(this).dialog("close"); $("#dialog_mail").remove(); } }, resizable: true }); return false; }); //Загрузка формы END /// Отправка формы START $(document).on("click",".hotengine-form_conts .hotengine-form_conts_submit_button", function () { var $form; var $form = $(this).parent().parent(); if($(".hotengine-form_conts")[0].checkValidity()) { $(".hotengine-form_conts").parent().after('<div class="loading" align="center"><img src="/img/loading.gif"/></div>'); $(".hotengine-form_conts").animate({opacity: "hide"}, 400); var rel; var rel = $(this).attr("rel"); $.ajax({ type: "POST", dataType: "html", data: $("form.hotengine-form_conts").serialize(), url: "/codes/form/template_form_construct_ajax.php?form=", timeout: 20000, error: function(request,error) { if (error == "timeout") { jQuery.facebox("Request timeout. Please try again. </i> "); $(".loading").animate({opacity: "hide"}, 0); $(".hotengine-form_conts").show(); } else { jQuery.facebox("Ошибка при выполнении Ajax запроса"); $(".loading").animate({opacity: "hide"}, 0); $(".hotengine-form_conts").show(); } }, beforeSend: function() { $(".loading").animate({opacity: "show"}, 400); }, success: function(data) { $(".loading").animate({opacity: "hide"}, 300, function(){ $(".loading").hide("fast", function () { $(".loading").remove(); $(".hotengine-form_conts").html(data); $(".hotengine-form_conts").animate({opacity: "show"}, 800); }); } ); } }); } else { console.log("invalid form"); } }); /// Отправка формы END // Дублируем функцию отправки, в случае нажатия клавиши ENTER вместо клика мышью по кнопке ОТПРАВИТЬ $(document).on("submit",".hotengine-form_conts .hotengine-form_conts_submit_button", function() { $(".hotengine-form_conts .hotengine-form_conts_submit_button").click(); }); }); // --> </script><table width="100%" border="0" class="hotengine-content-block-footer"> <tr> <td></td> <td></td> </tr> </table><span class="hotengine-marking" data-hotengine-marking-type="blog_catalog_page" data-hotengine-marking-timestamp="1387410575" data-hotengine-marking-blog_cat_page_catid="1156" data-hotengine-marking-view="2751" data-hotengine-marking-comments="0" data-hotengine-marking-rating="0" data-hotengine-marking-id="1019"></span></div> </div> <div class="footh"> </div> </div><div class="hotengine-read-other-article"><span class="hotengine-read-other-article-title"></span> <span><a href="https://blog.hotlist.biz/ru/blog/news/10350.htm" title="Добавлена функция автоматической отправки данных при изменении статуса заказа в статистике продаж.">Добавлена функция автоматической отправки данных при изменении статуса заказа в статистике продаж.<br/></a><a href="https://blog.hotlist.biz/ru/blog/news/10813.htm" title="Добавлена возможность массово управлять настройками комментариев для разных типов страниц.">Добавлена возможность массово управлять настройками комментариев для разных типов страниц.<br/></a><a href="https://blog.hotlist.biz/ru/blog/news/11455.htm" title="Добавлен экспорт категории без транслитерации (Экспорт заголовка категории).">Добавлен экспорт категории без транслитерации (Экспорт заголовка категории).<br/></a></span></div><div id="hotengine-api-comments" class="hotengine-api-comments"><div class="hotengine-api-comments-page"><form class="hotengine_comments_form" id="hotengine_comments_form" name="hotengine_comments_form" method="post" action="#hotengine_comments_form"><span class="hotengine_comments_form_name"><span class="hotengine_comments_form_name_title"></span> <input name="hotengine_comments_author_name" type="text" value="" size="27" maxlength="255"> </span><span class="hotengine_comments_form_email"><span class="hotengine_comments_form_email_title"></span> <input name="hotengine_comments_author_email" type="email" value="" size="27" maxlength="50" class="hotengine_comments_author_email" required placeholder="Ваш e-mail не публикуется"> </span><span class="hotengine_comments_rating_block"><span class="hotengine_comments_rating_title"></span> <span class="hotengine-shop-star-rating-current-rating"> <input type="radio" value="5" class="hotengine-shop-star-rating-current-rating-input" id="hotengine_comments_starrating_quality-5" name="hotengine_comments_starrating_quality"/> <label for="hotengine_comments_starrating_quality-5" class="hotengine-shop-star-rating-current-rating-star"></label> <input type="radio" value="4" class="hotengine-shop-star-rating-current-rating-input" id="hotengine_comments_starrating_quality-4" name="hotengine_comments_starrating_quality"/> <label for="hotengine_comments_starrating_quality-4" class="hotengine-shop-star-rating-current-rating-star"></label> <input type="radio" value="3" class="hotengine-shop-star-rating-current-rating-input" id="hotengine_comments_starrating_quality-3" name="hotengine_comments_starrating_quality"/> <label for="hotengine_comments_starrating_quality-3" class="hotengine-shop-star-rating-current-rating-star"></label> <input type="radio" value="2" class="hotengine-shop-star-rating-current-rating-input" id="hotengine_comments_starrating_quality-2" name="hotengine_comments_starrating_quality"/> <label for="hotengine_comments_starrating_quality-2" class="hotengine-shop-star-rating-current-rating-star"></label> <input type="radio" value="1" class="hotengine-shop-star-rating-current-rating-input" id="hotengine_comments_starrating_quality-1" name="hotengine_comments_starrating_quality"/> <label for="hotengine_comments_starrating_quality-1" class="hotengine-shop-star-rating-current-rating-star"></label> </span></span><span class="hotengine_comments_text_block"><span class="hotengine_comments_text_title"></span> <textarea name="hotengine_comments_text" class="hotengine_comments_text" cols="60" rows="4" maxlength="5000">