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

форма
<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="+7 000 000 00 00">
						</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");
	})
});
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
Shlop
@Shlop
Full Stack Developer (PHP/Laravel/JavaScript)
Могу предположить из-за того что пользователь может быстро несколько раз нажать на кнопку "Отправить" в результате будет отправлено несколько 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);
            }
        });
    })
});

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы