Лого weborb.ru
Сделать кнопку не активной при отправке данных на сервер

Сделать кнопку не активной при отправке данных на сервер

21-06-2017 0 323

Зачем нужно делать кнопки неактивными:

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

Понятно, что можно предотвратить лишние нажатия при помощи навешивания специальной визуализации, говорящей, что запрос принят и форма отправляется (простейший пример — показать какой-нибудь анимированный gif). Однако, кнопки-то при этом все равно останутся кликабельными, и самые нетерпеливые пользователи обязательно будут повторно кликать на кнопку. При этом, на эти дополнительные нажатия форма уже никак не сможет отреагировать, и фрустрация пользователя только увеличится.

В данной статье я расскажу вам как сделать кнопку неактивной во время ожидания ответа сервера на фреймворке yii2.

Всё что нам потребуется для этого, это не большой js код

/*disable button
     ========================================================*/
    $('body').on('beforeValidate', 'form.disable-submit-buttons', function (e) {
        $(':input[type="submit"]', this).attr('disabled', 'disabled');
        $(':input[type="submit"][data-disabled-text]', this).each(function (i) {
            var $this = $(this);
            if ($this.prop('tagName') === 'input') {
                $this.data('enabled-text', $this.val());
                $this.val($this.data('disabled-text'));
            } else {
                $this.data('enabled-text', $this.html());
                $this.html($this.data('disabled-text'));
            }
        });
    }).on('afterValidate', 'form.disable-submit-buttons', function (e) {
        if ($(this).find('.has-error').length > 0) {
            $(':input[type="submit"]', this).removeAttr('disabled');
            $(':input[type="submit"][data-disabled-text]', this).each(function (i) {
                var $this = $(this);
                if ($this.prop('tagName') === 'input') {
                    $this.val($this.data('enabled-text'));
                } else {
                    $this.html($this.data('enabled-text'));
                }
            });
        }
    });

Подключаем данный js код к своему проекту, и указываем класс disable-summit-buttons на нужную нам кнопку.

 <?php
            $form = ActiveForm::begin([
                'id' => 'myForm',
                'options' => [
                    'class' => 'disable-submit-buttons'
                ],
            ]);
            ?>

Рад если кому то помог, возникнут вопросы, предложения с радостью отвечу!)

Демо можно посмотреть здесь: Узнать записи домена

Теги: YII2 form submit input disable button

Комментарии

Комментариев пока что нет
Добавить комментарий

Подписывайтесь

на нашу новостную рассылку

и в новом году вы ничего интересного не пропустите!