0

Есть форма

<form id="subscribe">
 <input type="hidden" name="project_name" value="blabla">
 <input type="hidden" name="admin_email" value="[email protected]">
 <input type="hidden" name="form_subject" value="Test text">
 <input type="text" size="60" name="E-Mail" placeholder="Введите e-mail" required>
 <button>Подписаться</button>
</form>

Есть JS, использующий Jquery для сабмита

$(document).ready(function() {
    $("#subscribe").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: th.serialize()
        }).done(function() {
            alert("Спасибо!");
            setTimeout(function() {
                th.trigger("reset");
            }, 1000);
        });
        return false;
    });
});

При нажатии скрипт срабатывает, но почему-то выдает 2 алерта и отправляет 2 письма. Больше подключений этого скрипта или формы с подобным id нет. Подскажите в чем может быть проблема и почему код может срабатывать 2 раза?

3
  • 1
    поставьте брейкпойнт на строчку var th = $(this); и изучите call-stack в обоих случаях. Все же похоже, что скрипт включен в страницу два раза, так как в самом скрипте все правильно.
    – user176262
    9 фев 2016 в 4:57
  • 1
    Думаю, что происходит следующее. Вызывается обработчик submit при отправке формы, а нём Вы вызываете функцию $.ajax() для отправки формы. Чтобы этого не происходило, нужно изменить код формы таким образом, чтобы вместо submit обрабатывать событие onclick для кнопки. То есть вместо <button> использовать тег <input type="button">. 9 фев 2016 в 5:42
  • @VanyambaElectronics Спасибо за наводки, проблема решилась. Как решил - описал ниже. Вот только одна проблема - не могу понять почему так происходило, когда форма и подгрузка скрипта были в одном div-блоке
    – OstaninKI
    9 фев 2016 в 5:47

2 ответа 2

0

Кажется проблема найдена. Изначально скрипт был вставлен в страницу сразу после формы, обернутой в div. Перенес его под закрытие тега body - срабатывать начал 1 раз. Причина такого странного поведения, к сожалению, мне не понятна.

5
  • В каком месте страницы находится таг script, который грузит jquery?
    – user176262
    9 фев 2016 в 16:57
  • Да, и это называется не "проблема найдена", а "проблема спрятана".
    – user176262
    9 фев 2016 в 17:07
  • @Igor, jquery подгружается в хедере, данный скрипт, который я описал выше находился сразу за </form> в пределах одного div-блока
    – OstaninKI
    10 фев 2016 в 18:09
  • желательно было бы получить минимальный пример кода страницы, воспроизводящий описаное поведение
    – user176262
    10 фев 2016 в 18:13
  • @Igor, <div> <form id="subscribe"> <input type="hidden" name="project_name" value="blabla"> <input type="hidden" name="admin_email" value="[email protected]"> <input type="hidden" name="form_subject" value="Test text"> <input type="text" size="60" name="E-Mail" placeholder="Введите e-mail" required> <button>Подписаться</button> </form> <script src="blabla.js"></script> </div>
    – OstaninKI
    12 фев 2016 в 3:19
0
<form id="subscribe">
 <input type="hidden" name="project_name" value="blabla">
 <input type="hidden" name="admin_email" value="[email protected]">
 <input type="hidden" name="form_subject" value="Test text">
 <input type="text" size="60" name="E-Mail" placeholder="Введите e-mail" required>
 <button type="button" class="submit">Подписаться</button>
</form>

По умолчанию у <button> type="submit" и тем самым вы пинаете два раза один и тот же запрос...

$(function() {
    $(".submit").on('click', function() {
        var th = $('#subscribe');
        $.ajax({
            type: "POST",
            url: "script.php",
            data: th.serialize()
        }).done(function() {
            alert("Спасибо!");
            setTimeout(function() {
                th.trigger("reset");
            }, 1000);
        });
    });
});

Вот так не должно отправлять 2 запроса

3
  • А зачем Вам тогда return false;?
    – user176262
    9 фев 2016 в 17:05
  • На всякий случай, можно и убрать.
    – Shnur
    9 фев 2016 в 20:13
  • почитайте en.wikipedia.org/wiki/Cargo_cult_programming
    – user176262
    9 фев 2016 в 20:33

Ваш ответ

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

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