Как адаптировать код на новый jQuery?

Question

[hsnz]

Коллеги, добрый день.
Нашел старенький код, для обработки формы без перезагрузки страницы.
Но он не работает, я так полагаю, что он устарел и не работает с новым jQuery.
Помогите пожалуйста найти ошибку и адаптировать код.

var form=$('#email2');form.submit(function(event){event.preventDefault();
var form_status=$('<div class="form_status"></div>');$.ajax({url:$(this).attr('action'),type:"POST",data:$(this).serialize(),beforeSend:function(){form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i>Отправление...</p>').fadeIn());}}).done(function(data){form_status.html('<p class="text-success">Спасибо, что написали нам.</p>').delay(3000).fadeOut();});});

Answer 1

[maxsnw]

вероятно, еще должен быть код, который непосредственно обрабатывает эту форму, я имею ввиду пхп файл.

Comments

[hsnz]

php выглядит следующим образом:

<?php
$name       = @trim(stripslashes($_POST['name'])); 
$from       = @trim(stripslashes($_POST['email']));
$phone    	= @trim(stripslashes($_POST['phone'])); 
$to         = 'your_email';//replace with your email
 
$headers  = array()."\r\n";
$headers 	= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-type: text/plain; charset=utf8\r\n"; 
$headers .= "From: {$name} <{$from}>\r\n"; 
$headers .= "Reply-To: <{$from}>\r\n"; 
$headers .= "Телефон: {$phone}\r\n";
$headers .= "X-Mailer: PHP/".phpversion()."\r\n";
 
mail($to, $phone, $headers);
 
die;

[maxsnw]

Окей, тогда вопрос возникает, а где в форме обращение к этому коду? Точнее пропишите адрес к файлу и смотрите в консоли, происходит ли отправка вообще и обращение к файлу.

[hsnz]

Все происходит как надо, письмо приходит, только он открывает мне php файл с пустой страницей.

Answer 2

[Егор Живагин]

Вы реально что-то можете прочесть в том, что скинули? Сначала надо нормально отформатировать код

var form = $('#email2');
form.submit( function(event){
  event.preventDefault();
  var form_status=$('<div class="form_status">
  </div>');
  $.ajax({ 
    url: $(this).attr('action'),
    type:"POST",
    data: $(this).serialize(),
    beforeSend: function(){ 
      form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i>Отправление...</p>').fadeIn());
    }}).done(function(data){
      form_status.html('<p class="text-success">Спасибо, что написали нам.</p>').delay(3000).fadeOut();
    });
  });

Что именно не работает? Какие ошибки в консоли?

Comments

[hsnz]

В консоле ошибок нет, просто он игнорирует данный скрипт и уводит меня на php файл и пустую страницу, а должен выводить "Ок" без перезагрузки.

[Егор Живагин]

hsnz, судя по тому, что в коде редиректов нет, ищите ошибки в php-файле

[Максим Тимофеев]

hsnz, согласен с Егор Живагин. Проверьте еще есть ли реально #email2 и сколько их, а так же не через js ли он вставлен иначе надо селектор иначе делать:
$('body').on('submit','#email2',function(event){

Answer 3

[Максим Тимофеев]

если речь о jquery 3.x то там изменения в $.ajax
api.jquery.com/Jquery.ajax

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

А вообще

Но он не работает

это ни о чем. Откройте консоль, посмотрите есть ли ошибки, потом там же посмотрите уходит ли запрос и что получает в ответ.
Вообще код странный, по какому событию он запускается не понятно. Я бы переписал его, обратите внимание на пример, который привел Егор Живагин