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

Question

[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>

Answer 1

[devstudent]

Ajax технология

$(document).ready(function(){
	$('#order').submit(function(){ // по кнопке отправки данных формы 
            	$.ajax({  //обратываем ее без перехода в php-файл 
                 //  ... показываем модальнео окно и что угодно в нем

Comments

[ligisayan]

devstudent а action тогда нужно убирать?

[devstudent]

ligisayan: нет, в нем же будет обработка формы как бы "в фоне", переброса на него не будет

[ligisayan]

devstudent ну вот, к примеру - делаю так jsfiddle.net/vGAsL/63
но ничего не происходит..

[devstudent]

ligisayan:
$('.confirmation').submit(function(){
$.ajax({
type : 'POST',
url : '/system/wpacert',
data : $("#form_id").serializeArray(),
success: function (data) {
$(".confirmation").magnificPopup({
items: {
src: '#confirmation',
type: 'inline'
}
});
alert('sucsess');// проверяем работу скрипта в случае успеха
},
error :function(){
alert('fail');// проверяем работу скрипта в случае неудачи
}
});
});

[ligisayan]

devstudent то ли так должно работать без страницы получения, то ли у меня снова где-то ошибка, но проверить всплывающее окно не удается jsfiddle.net/vGAsL/64

[ligisayan]

devstudent как я понимаю - у меня именно submit не срабатывает $('#order').submit(function(){});
хотя click норм отрабатывает

[devstudent]

ligisayan: путь к php файлу правильный?

[ligisayan]

devstudent ну, в фидле jsfiddle.net/vGAsL/64 его нет, а на сайте правильный, но алерт же в любом случае бы выскочил или консоль.лог, если сабмит срабатывает - так ведь?

[devstudent]

обратите внимание $('#form_id').submit..... - здесь id формы!
_________________________________________________
ligisayan: $('#form_id').submit(function(){
$.ajax({
type : 'POST',
url : '/system/wpacert',
data : $("#form_id").serializeArray(),
success: function () {
$(".confirmation").magnificPopup({
items: {
src: '#confirmation',
type: 'inline'
}
});
alert('sucsess');// проверяем работу скрипта в случае успеха
},
error :function(){
alert('fail');// проверяем работу скрипта в случае неудачи
}
});
});
_____________________________
Убираем .serializeArray(), параметр data.
вот так - срабатывает alert с текстом fail .

[devstudent]

попробуйте у себя

[ligisayan]

devstudent попробовал - alert('sucsess'); отрабатывает, но magnificPopup не всплывает при submit, хотя при click срабатывает

$(".confirmation").click(function(){
	$(this).magnificPopup({
		items: {
		src: '#confirmation',
		type: 'inline'
		}
		});
});

$('.checkout').submit(function(){
$.ajax({
type : 'POST',
url : '/my-account',
data : $(".checkout").serializeArray(),
success: function () { 
$(".confirmation").magnificPopup({
items: {
src: '#confirmation',
type: 'inline'
}
});
alert('sucsess');// проверяем работу скрипта в случае успеха 
},
error :function(){
alert('fail');// проверяем работу скрипта в случае неудачи 
}
});
});

[devstudent]

ligisayan: клик стоит на $(".confirmation") а сабмит на $('.checkout'). Чтобы вызвать попап ,у элемента, его вызывающего, ведь должен быть связующий атрибут, раз на клике срабатывает. похоже у $(".confirmation") все окей. А, у элемента $('.checkout'), на котором висит сабмит, есть такой атрибут ?

[ligisayan]

devstudent: фидл уже не стал менять id="form_id"

[devstudent]

ligisayan:
Может так попробуйте
$('#form_id').submit(function(){
$.ajax({
type : 'POST',
url : '/my-account',
data : $("#form_id").serializeArray(),
success: function () {
$(this).magnificPopup({
items: {
src: '#confirmation',
type: 'inline'
}
});
alert('sucsess');// проверяем работу скрипта в случае успеха
},
error :function(){
alert('fail');// проверяем работу скрипта в случае неудачи
}
});
});

[ligisayan]

devstudent: добавил в конец еще return false; jsfiddle.net/vGAsL/70 - теперь интересный эффект - модальное срабатывает со второго клика, но сам ajax не отрабатывает..

[ligisayan]

а просто $(this).magnificPopup({}) вызывает модалку, но не отрабатывает сам ajax...

Answer 2

[Maxim Nepritimov]

Ajax-запросом отправляем данные на сервер, а далее 2 варианта:

1. Возвращать верстку всплывашки вместе с результатами формы
   
2. Использовать возможности ES6 - шаблонные строки и вставлять результаты запроса в шаблон и выводить на экран
   

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

Comments

[ligisayan]

Maxim Nepritimov меня вполне и первый вариант устроит, т.к. данных не много. а как вы видите в реализации возвращение результатов формы во всплывашке?

[Maxim Nepritimov]

ligisayan: На сервере вы получаете данные, которые отправили через ajax. Их можно обработать и отправить в верстку всплывашки. Далее, вы возвращаете в результате верстку всплывашки вместе с подставленными данными. В `success` обрабатываете присланные сервером данные (верстку всплывашки) и отображаете в нужном месте.

[ligisayan]

Maxim Nepritimov как я понимаю - у меня именно submit не срабатывает $('#order').submit(function(){});
хотя click норм отрабатывает