Иногда форма отправляет данные множество раз. Где ошибка, можете объяснить?

Question

[Павел Сидоров]

форма

<form action="/test/ajax.php" class="form" data-ajax>
				<div class="form-content">
					<div class="h3 modal-title text-center">Обратный звонок</div>
					<div class="text-center" style="margin-bottom: 20px;">Перезвоним Вам в течение 10 минут</div>
					<input type="hidden" name="url" value="<?=$APPLICATION->GetCurDir()?>">
						<div class="form-group">
							<input type="text" class="form-control w-100" name="name" required placeholder="Имя">
						</div>
						<div class="form-group">
							<input type="tel" class="form-control w-100" name="phone" required placeholder="[phone]">
						</div>
						
						<div class="form-group text-center">
							<button type="submit" id="buttom-click" class="btn btn-lg w-100">Отправить</button>
						</div>
				</div>
			</form>

js

$(function() {
	$("form[data-ajax").on("submit", function(e) {
		e.preventDefault();
		var $form = $(this);
		$form.find(".input--error").removeClass("input--error");
		$.post($form.attr("action"), $form.serialize(), function(json) {
			if (json.result == "error") {
				for (var x in json.errors) {
					$form.find('[name="' + x + '"]').addClass("input--error");
				}
			} else if (json.result == "redirect") {
				window.location.href = json.url;
			} else {
				$form.html(json.html);
			}
		}, "json");
	})
});

Comments

[Павел]

Возможно не форма отправляет несколько раз, а юзер жмёт на кнопку несколько раз, т.к. не понимает, что отправка уже идёт...
Варианты, прятать кнопку, делать её не активной после нажатия, добавлять форме при отправке какой-нить класс, и проверять его каждый раз, если класс есть - не отправлять...
ещё можно кучу всего разного придумать....

[ProjectSoft]

И из функции сабмита возвращать false.

Answer 1

[Сергей Хлопов]

Могу предположить из-за того что пользователь может быстро несколько раз нажать на кнопку "Отправить" в результате будет отправлено несколько ajax запросов.

Можно попробовать сделать вот так:
Когда событие "submit" выполнится в первый раз кнопка "Отправить" заблокируется, и если пользователь сразу нажмёт её ещё раз то событие уже не будет запущенно т.к. кнопка будет заблокирована до тех пор пока ajax запрос не завершится. Пример скрипта ниже, я его не проверял, если будите использовать то протестируйте, не ломается ли ничего. На кнопку в html нужно будет добавить класс: btn-form-submit.

Либо может что-то в php скрипте, или на форме устанавливается несколько событий которое отправляет ajax запрос.

$(function () {
    $("form[data-ajax]").on("submit", function (e) {
        e.preventDefault();
        var $form = $(this);
        var btn = $form.find(".btn-form-submit");
        // Заблокируем кнопку отправить
        $(btn).prop("disabled", true);
        $form.find(".input--error").removeClass("input--error");
        $.post($form.attr("action"), $form.serialize(), function (json) {
            if (json.result == "error") {
                for (var x in json.errors) {
                    $form.find('[name="' + x + '"]').addClass("input--error");
                }
            } else if (json.result == "redirect") {
                window.location.href = json.url;
            } else {
                $form.html(json.html);
            }
        }, "json").always(function () {
            if (btn.length) {
                // Разблокируем кнопку отправить когда ajax запрос завершится будь то успех или ошибка
                $(btn).prop("disabled", false);
            }
        });
    })
});

Небольшой совет, лучше давать обратную связь пользователю, когда он отправил форму показывать какую нибудь загрузку/крутяшку/прилоуд, что бы пользователь понимал что какое-то действие происходит.

Comments

[Павел Сидоров]

спасибо.

определяете кнопку

var btn = $form.find(".btn-form-submit");
$(btn).prop("disabled", true);

далее при любом исходном ответе от выполнения запроса вешаете обработку always()

[Сергей Хлопов]

Павел Сидоров, Пожалуйста, да, при любом ответе от сервера будет выполнена функция которую передаём в always, документация jQuery.post.

Вообще может даже вот эта проверка лишняя:

if (btn.length) { // эта проверка возможно лишняя
  // Разблокируем кнопку отправить когда ajax запрос завершится будь то успех или ошибка
  $(btn).prop("disabled", false);
 }

У вас в форму иногда что-то вставляется с помощью вот этой строки: form.html(json.html); поэтому я добавил тот if, но в переменной btn всё равно эта кнопка останется. Можете убрать проверку и протестить не вылетает ли ошибка в консоли когда в форму что-то вставляется если нет то хорошо