faryshta/yii2-disable-submit-buttons

Yii2 asset to automatically disable submit buttons on Yii2 ActiveForm.

Faryshta Yii2 Disable Buttons

, _(*1)

Yii2 asset to automatically disable submit buttons on Yii2 ActiveForm., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

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

or add, _(*5)

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

to the require section of your composer.json file., _(*6)

Register Asset

Register the faryshta\disableSubmitButtons\Asset, preferably on your AppAsset dependencies, _(*7)

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., _(*8)

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

$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., _(*10)

Javascript

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

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., _(*12)

$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, _(*13)

$('#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, _(*14)

composer deploy-tests
composer yii serve

License

The BSD License (BSD). Please see License File for more information., _(*15)