Yii 2 - Membuat dialog konfirmasi sebelum submit form

alfa6661
- January 31, 2016
0 (0 votes)
Rate :
Cara membuat dialog konfirmasi sebelum submit form

Membuat Konfirmasi sebelum Submit Form dalam pemrosesan sebuah form, kadang kita perlu konfirmasi terlebih dahulu sebelum men-submit-nya, misalnya untuk membuat penggunakan melakukan pengecekan ulang terhadap hasil inputannya. Pada artikel kali ini kita akan mencoba menampilkan dialog konfirmasi sebelum melakukan submit form.

Kali ini kita akan menggunakan modal twitter bootstrap untuk menampilkan dialog konfirmasi, idenya adalah seperti ini, ketika kita menekan button submit di form, kita tidak akan mensubmit form, akan tetapi menampilkan modal bootstrap. Pada modal bootstrap ini, kita akan menyediakan button untuk submit form.

Kode

Pertama-tama, untuk memudahkan, kita akan mengatur id dari form yang digunakan. Contoh user-form.

<?php $form = ActiveForm::begin([
	'id' => 'user-form'
]); ?>

Bootstrap Modal

Karena kita akan menggunakan bootstrap modal, kita harus mengimport class Modal.

use yii\bootstrap\Modal;

kita akan membuat modal bootstrap yang akan digunakan sebagai dialog konfirmasi kita nantinya.

$button = Html::button('Cancel', ['class' => 'btn btn-default btn-md', 'data' => ['dismiss' => "modal"]]);
$button .= Html::button('Submit', ['id' => 'submit', 'class' => 'btn btn-success success btn-md']);
Modal::begin([
    'header' => '<h4>Konfirmasi</h4>',
    'toggleButton' => false,
    'id' => 'confirm-submit',
    'footer' => $button
]);
	echo 'Konten';
Modal::end();

Javascript

Selanjutnya kita memerlukan beberapa baris kode javascript untuk menampilkan modal.

$js = '
$("body").on("beforeSubmit", "form#user-form", function () {
    var form = $(this);     
    if (form.find(".has-error").length) {
        return false;
    }
    else {
        if($("#confirm-submit").hasClass("in")) {
            return true;
        }
        else {
            $("#confirm-submit").modal("show");
        }
    }    
    return false;
});
$("#submit").click(function(){
    $("#user-form").submit();
});
';
$this->registerJs($js);

Kode Lengkap

<?php
use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\widgets\ActiveForm;
$js = '
$("body").on("beforeSubmit", "form#user-form", function () {
    var form = $(this);     
    if (form.find(".has-error").length) {
        return false;
    }
    else {
        if($("#confirm-submit").hasClass("in")) {
            return true;
        }
        else {
            $("#confirm-submit").modal("show");
        }
    }    
    return false;
});
$("#submit").click(function(){
    $("#user-form").submit();
});
';
$this->registerJs($js);
$button = Html::button('Cancel', ['class' => 'btn btn-default btn-md', 'data' => ['dismiss' => "modal"]]);
$button .= Html::button('Submit', ['id' => 'submit', 'class' => 'btn btn-success success btn-md']);
Modal::begin([
    'header' => '<h4>Konfirmasi</h4>',
    'toggleButton' => false,
    'id' => 'confirm-submit',
    'footer' => $button
]);
	echo 'Konten';
Modal::end();
?>
<div class="user-form">
    <?php $form = ActiveForm::begin([
    	'id' => 'user-form'
    ]); ?>
	    <?= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>
	    <?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>
	    <div class="form-group">
	        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
	    </div>
    <?php ActiveForm::end(); ?>
</div>

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article