Faryshta Yii2 Disable Buttons

Yii2 asset to automatically disable submit buttons on Yii2 ActiveForm.

Installation

The preferred way to install this extension is through composer.

Either run

composer require "faryshta/yii2-disable-submit-buttons:~2.0.0"

or add

"faryshta/yii2-disable-submit-buttons": "~2.0.0"

to the require section of your composer.json file.

Register Asset

Register the faryshta\disableSubmitButtons\Asset, preferably on your AppAsset dependencies

use faryshta\disableSubmitButtons\Asset as DisableSubmitButtonAsset;

class AppAsset extends yii\web\AssetBundle
{
    public $depends = [
        DisableSubmitButtonsAsset::class,
        // other dependencies
    ];
}

Usage

Add css class disable-submit-buttons to your [ActiveForm] (http://www.yiiframework.com/doc-2.0/yii-widgets-activeform.html) widget.

Optionally if you want to change the text on a button, add the attribute data-disabled-text with the text to be changed.

$form = ActiveForm::begin([
    'options' => ['class' => 'disable-submit-buttons'],
    // other configurations
]);

    // inputs

    Html::submitButton('Submit', [
        // optional, will show the value of `data-disabled-text` attribute
        // while handling the validation and submit
        'data' => ['disabled-text' => 'Please Wait']
    ])

$form->end();

With this the :input[type="submit"] buttons will be disabled and if the validation fails the buttons will be enabled again.

Javascript

This asset adds 2 methods on jQuery disableSubmitButtons() and enableSubmitButtons() which can be called from a <form> tag generated by ActiveForm widget.

Ajax Example

The following example submits the form using ajax and enables the submit buttons so the ur ser can send another form after completing the ajax request.

$form = ActiveForm::begin([
    'id' => 'ajax-form',
    'options' => ['class' => 'disable-submit-buttons'],
]);
    echo $form->field($model, 'name');

    echo Html::submitButton('Submit', [
        'data' => ['disabled-text' => 'Validating'],
    ]);

$form->end();

$this->registerJsFile('ajax-form.js');

Then on ajax-form.js

$('#ajax-form').on('beforeSubmit', function () {
  var $yiiform = $(this);
  $.ajax(
    {
      type: $yiiform.attr('method'),
      url: $yiiform.attr('action'),
      data: $yiiform.serializeArray(),
    }
  ).done(function(data) {
    // success actions
    $yiiform.enableSubmitButtons(); // enable the submit buttons
  });

  return false; // prevent default form submission
});

Live Demo

You can run a live demo of this library with the following composer commands

composer deploy-tests
composer yii serve

License

The BSD License (BSD). Please see License File for more information.