0

Есть кнопка

<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>

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

5
  • PD stackoverflow.com/questions/2323948/…
    – splash58
    28 авг 2019 в 11:37
  • Вариант <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> у меня вообще не работает(т.е. данные отправляются, но кнопка не блокируется!).
    – Cross
    28 авг 2019 в 11:58
  • для варианта из UPD Подключили jquery?
    – Skywave
    28 авг 2019 в 12:08
  • Вроде не сложный вопрос, чувствую что я где-то тупанул, но где ??))
    – Cross
    28 авг 2019 в 12:13

3 ответа 3

1

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

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

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

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

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

4
  • Да, это как раз вариант из базового примера. ` $('#myForm').one('submit', function() { $(this).find('input[type="submit"]').attr('disabled','disabled'); });`
    – Cross
    28 авг 2019 в 12:37
  • Немного измененный :)
    – Mully
    28 авг 2019 в 12:38
  • ну .one() - это другой метод, для в вашем случае лучше использовать .submit()
    – Mully
    28 авг 2019 в 12:39
  • Спасибо за помощь! Я уже отмучал этот вопрос с помощью .one(), но допускаю, что .submit() тоже норм вариант, просто сейчас нет времени/возможности проверить.
    – Cross
    28 авг 2019 в 12:46
0

Явно указал 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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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