Как предотвратить повторную отправку формы через enter?

Question

[Sanzhar Bazarbek]

Добрый день! На моей форме стоит Ajax-форма - после успешной отправки выводится модальное окно "Спасибо"
На этом моменте можно нажать на "enter" и форма отправится два раза. Как это предотвратить?

$(function() {
    $('#callBack').submit(function(e) {
        var $form = $(this);
        
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        })
        
        .done(function() {
            toggleCall();
            toggleCallModalThx();
        })
        
        .fail(function() {
            toggleCall();
            console.log('Fail');
        });
        
        e.preventDefault(); 
    });
});

Comments

[edward_freedom]

добавь атрибут форме, что она уже добавлена или запиши это в куки

[Sanzhar Bazarbek]

edward_freedom, про первое не понял. Какой атрибут добавить, что она уже добавлена?

[edward_freedom]

Sanzhar Bazarbek, какой нибудь data-formSended и потом проверяй, есть оно или нет

[Sanzhar Bazarbek]

edward_freedom, что делаю не так?

$(function() {
    $('#callBack').submit(function(e) {
        var $form = $(this);

        if ($(this).hasAttribute('data-formSended')) {
            return
        }

    
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        })
        
        .done(function() {
            $(this).addAttribute('data-formSended')
            toggleCall();
            toggleCallModalThx();
        })
        
        .fail(function() {
            toggleCall();
            console.log('Fail');
        });
    
        e.preventDefault(); 
    });
});

Answer 1

[Надим]

Заведите переменную для записи состояния - отправлено / не отправлено. Перед отправкой формы используя банальный if проверяйте состояние этой переменной и отправляйте форму только, если она не отправлялась ранее.

Comments

[Sanzhar Bazarbek]

Что делаю не так?

$(function() {
    $('#callBack').submit(function(e) {
        var $form = $(this);

        if (stateFunc) {
            return
        }
    
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        })
        
        .done(function() {
            stateFunc = "success";
            toggleCall();
            toggleCallModalThx();
        })
        
        .fail(function() {
            toggleCall();
            console.log('Fail');
        });
    
        e.preventDefault(); 
    });
});

[Надим]

Sanzhar Bazarbek, отмена действия по умолчанию должна идти в самом начале.

[Sanzhar Bazarbek]

Надим Закиров, ajax с добавление if - не работает

$(function() {
    $('#callBack').submit(function(e) {
        e.preventDefault(); 

        var $form = $(this);

        if (stateFunc) {
            return
        }
    
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        })
        
        .done(function() {
            stateFunc = "success";
            toggleCall();
            toggleCallModalThx();
        })
        
        .fail(function() {
            toggleCall();
            console.log('Fail');
        });

    });
});

[Надим]

Sanzhar Bazarbek, попробуйте this читать до отмены действия по умолчанию, а отправку формы написать после. Плюс, используйте полный синтаксис if / else.

[Sanzhar Bazarbek]

Надим Закиров, также - не работает. Кажется он в if не заходит

$(function() {
    $('#callBack').submit(function(e) {
        var $form = $(this);

        e.preventDefault(); 

        if (!test2) {
            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize()
            })
            
            .done(function() {
                // stateFunc = "success";
                toggleCall();
                toggleCallModalThx();
            })
            
            .fail(function() {
                toggleCall();
                console.log('Fail');
            });
        } else {
            return;   
        }

    });
});

[Надим]

Sanzhar Bazarbek,

$(function() {
	
	$('#callBack').submit(async function() {
		
		event.preventDefault(); // Предотвращаем отправку формы
		
		// Если переменная статуса не существует:
		
		if (typeof form_send_status == 'undefined') {
			
			form_send_status = 1; // Создаём её глобально
			
			try {
				
				// Отправляем форму AJAX-ом:
				
				var response = await $.ajax({
					type: $('#callBack').attr('method'),
					url: $('#callBack').attr('action'),
					data: $('#callBack').serialize()
				});
				
				console.log('Форма отправлена успешно. Ответ сервера: ' + response);
				
				// После получения ответа выполняйте нужные дейтсвия:
				
				toggleCall();
				toggleCallModalThx();
				
			}
			
			// В случае возникновения ошибок:
			
			catch (err) {
				
				// Выводим уведомление в консоли с деталями ошибки:
				
				console.log('При отправки формы произошла ошибка:');
				console.error(err);
				
				// Плюс, выполняйте что нужно:
				
				toggleCall();
				
			}
			
		}

	});
	
});

Если есть желание, изучите как работает await и что такое try / catch - это полезные для вас знаний будут.