Блокировать кнопку Submit при повторном нажатии до обновления страницы

23 июня 2021, 01:10

Есть кнопка

<form method="POST" action="...">
...
<button type="submit">click me</button>
</form>

Нужно сделать так, чтобы при нажатии кнопка становилась неактивной до обновления страницы (по нажатию идет отправка данных и страница обновляется).

Модифицирую до вида <button type="submit" onclick="this.disabled = true; this.innerHTML='in progress'">click me</button>

В результате после нажатия кнопка блокируется, но данные почему-то не отправляются (и, соотв, страница не обновляется). В чём косяк?

UPD. Вариант

<script>
$('#multi_mod').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});
</script>
<form name="multi_mod" method="POST" action="...">
...
<input type="submit" value="click me">
</form>

у меня вообще не работает(т.е. данные отправляются, но кнопка не блокируется!). Где косяк? Какие ещё могут быть варианты ???

Answer 1

Выше 1.6 jQuery попробуйте использовать .prop:

$( 'input[type="submit"]').prop( "disabled", true );//0    
$( 'input[type="submit"]' ).prop( "disabled", false );//1

Answer 2

Вам нужно при клике клике на кнопку заблокировать ее => event должен сработать после отправки формы. Попробуйте использовать функцию .submit() для обработки события формы:

$('form').submit(function(e){
    let input = $(this).find('input');
    input.attr('disabled', true);
});

Event submit срабатывает на форму, когда вы ее отправляете. Дальше вы ищите input в форме и присваиваете ему атрибут disabled.

Answer 3

Явно указал this и всё заработало

$('#multi_mod').one('submit', function() {
    $('#btn_mod').find('input[type="submit"]').attr('disabled','disabled');
});

<form id="multi_mod" name="multi_mod" method="POST" action="...">
...
<input type="submit" value="click me" id="btn_mod">
</form>

Вот такое вот неожиданное решение!)) Может кому-то поможет.