@ligisayan

Как получить результат формы во всплывающем окне?

Есть форма регистрации нового пользователя, которая по умолчанию результат обработки отправляет на страницу confirm.php. А я хочу сделать так, чтобы результат срабатывал и отображался во всплывающем окне без перехода на другую страницу. Вот набросал фидл, но в какую сторону дальше двигаться пока не могу понять
function closeSelf() {
  self.close();
  return true;
}
$(".confirmation").magnificPopup({
  items: {
    src: '#confirmation',
    type: 'inline'
  }
});

<form action="/system/wpacert" method="post" enctype="multipart/form-data" onsubmit="return closeSelf()" name="certform" action="confirm.php">
  <input type="text" value="Имя" />
  <input type="password" value="Пароль" />
  <div>Сертификат:
    <input type="file" name="cert1" />
  </div>

  <div>
    <input class="confirmation" type="submit" value="Добавить" />
  </div>
</form>
<div id="confirmation" class="mfp-hide">
  <h2>Результат</h2>
  <p>Имя</p>
  <p>Пароль</p>
  <p>Сертификат №</p>
</div>
  • Вопрос задан
  • 1137 просмотров
Пригласить эксперта
Ответы на вопрос 2
@devstudent
frontend-developer
Ajax технология
$(document).ready(function(){
	$('#order').submit(function(){ // по кнопке отправки данных формы 
            	$.ajax({  //обратываем ее без перехода в php-файл 
                 //  ... показываем модальнео окно и что угодно в нем
Ответ написан
nepritimov_m
@nepritimov_m
Frontend dev.
Ajax-запросом отправляем данные на сервер, а далее 2 варианта:
  1. Возвращать верстку всплывашки вместе с результатами формы
  2. Использовать возможности ES6 - шаблонные строки и вставлять результаты запроса в шаблон и выводить на экран


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы