0

Есть сайт proteksstroy.ru на нем есть несколько форм , точнее форма, а другие просто ссылаются на ее id. Так вот эта самая форма не хочет отправляться со слайдера, после ввода данных происходит перезагрузка и ничего не отправляется. А вот по вызову данной формы через другие формы, данная форма почему-то работает корректно и все данные отправляются, хотя форма одна и та же, прошу помочь с данной проблемой.

Вот сама форма:

<form method="POST" id="callbacks" class="callback clearfix">
  <input type="hidden" name="project_name" value="ООО ПРОТЭКССТРОЙ">
  <input type="hidden" name="form_subject" value="Вам оставили заявку на сайте proteks">
  <h4>Бесплатная консультация<br> по Вашему обьекту</h4>
  <label><input type="text" name="Имя" placeholder="Ваше имя" required /</label>
  <label><input type="text" name="Телефон" placeholder="Ваш телефон" required /></label>
  <button class="button" id="click">Отправить</button>
</form>

А вот аякс перехватчик:

$("#callbacks").submit(function() { //Change
		$.ajax({
			type: "POST",
			url: "mail.php",
			data: $(this).serialize()
		}).done(function() {
			$.fancybox ( { href: '#popup_order' } );
			$(this).trigger("reset");
		});
		return false;
	});

Очень прошу вас помочь, уже очень долго не могу понять в чем проблема.

3 ответа 3

3

Потому Что пока доходит до return false событие уже срабатывает.Надо его остановить прежде что либо делать.

И this формы не предают так как вы предавали.Потому Что this в функции которой мы используем ссылается на этот объект.В вашем случае он ссылаться на callback функцию переменной в методе done.

$("#callbacks").submit(function(e) {
    e.preventDefault();
    var _this = this;
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $(this).serialize()
    }).done(function() {
        $.fancybox ( { href: '#popup_order' } );
        $(_this).trigger("reset");
    });
});
2
  • все также не работает( 22 июл 2016 в 18:52
  • @Руслан Демин Посмотри как разъясняет Иван Пшеницын.id должны быть уникальны,когда ставишь id убедись что на данной странице он уникальный,то есть не повторяется 23 июл 2016 в 7:46
2

У вас на странице целых 5 форм с #callbacks. Поэтому код, предложенный Vanya Avchyan у вас не работает, хотя он верный:

$("#callbacks").submit(function(e) {
    e.preventDefault();
    var _this = this;
    $.ajax({
         type: "POST",
         url: "mail.php",
         data: $(this).serialize()
    }).done(function() {
         $.fancybox ( { href: '#popup_order' } );
         $(_this).trigger("reset");
    });
});

скриншот вашего кода

Слушатель события вешается только на первую из форм. Обратите внимание, что аттрибут id по стандартам HTML должен быть уникальным на странице, в этом вся его суть. Это уникальный, однозначный идентификатор элемента.

В вашем случае стоит или избавиться от лишних "клонов", или вешать событие не по id, а используя класс, например

$("form.callback").submit(...)

Но у вас не только #callbacks формы содержат класс callback, поэтому его следует заменить каким-то другим, определяющим именно нужные формы.

А вот одинаковый id уберите в любом случае. Он вам точно не нужен. JS для этих элементов все равно не работает, а CSS (если он привязан к этому id) несложно перевести на классы.

0

$("#callbacks").submit(function() { //Change
var data = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "mail.php",
			data: data
		}).done(function() {
			$.fancybox ( { href: '#popup_order' } );
			$(this).trigger("reset");
		});
		return false;
	});

у вас внутри запроса $(this) уже не ваша форма

1
  • К сожалению, не взлетело, все также( 22 июл 2016 в 16:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.