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 you have read our privacy policy.

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