How to disable button when text input is empty in yii2?

Question

I want to disable button when text input is empty in yii2? can you help me? this is my code thanks

<div class="pemesanan-search thumbnail padding-baru col-sm-6 input">

    <?php $form = ActiveForm::begin([
        'action' => ['menubayar'],
        'method' => 'get',
    ]); ?>

    <?= $form->field($model, 'NO_REKENING') ?>

    <?= $form->field($model, 'NO_KARTU') ?>

    <?= $form->field($model, 'NAMA') ?>

    <div class="form-group">
        <center><?= Html::submitButton('Cek Kartu Kredit', ['class' => 'btn btn-default']) ?></center>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Do you want to do this just to prevent form submission if the input is empty? If that is the case Yii2 have great validation to handle such things, and you can also use HTML5 to require that input. If you want to disable the submit button you have to register a JS code and use Java Script to do that. — TheDevWay
– TheDevWay, Commented Nov 24, 2016 at 10:06

TheDevWay · Accepted Answer · 2016-11-24 10:25:56Z

First disable the submit button by default, by using disabled attribute in button's option.

After that you have to register a JS code using Yii2 RegisterJS.

Then trigger event using jQuery to remove disabled attribute after the input value is changed.

$( "# [id of the input that needs value]" ).change(function() {
   $('input[type="submit"]').removeAttr('disabled');
});

By using above code, if you change the value of the input whith this id, it means that its not empty anymore and the disabled attribute will be removed.

Or also you can check if $("# [id of the input that needs value]").val(); is not empty remove the disabled attribute again with this code:

$('input[type="submit"]').removeAttr('disabled');

P.S: You may also define rules in its model and make that attribute as Required in the model rule, and let Yii handles the validation. You can learn more about that by reading This document.

Collectives™ on Stack Overflow

How to disable button when text input is empty in yii2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related