javascriptjqueryyii2jquery-dirtyforms

Dirty form not working


i wanted to monitor the forms for change and alerts the user before leaving the page. so i used a dirty form plugin found here

this is the code i tried

form

  <?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use app\models\Countries;
use yii\helpers\ArrayHelper;

/* @var $this yii\web\View */
/* @var $model app\models\Organizations */
/* @var $form yii\widgets\ActiveForm */
?>

<link rel="stylesheet" href="<?php echo Yii::$app->request->baseUrl;?>/css/userHome.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00005/jquery.dirtyforms.min.js"></script>
<div class="organizations-form">
    <h2>Update Billing Address</h2><br>
    <div class="col-md-10 col-md-offset2">

    <?php $form = ActiveForm::begin(); ?>


    <?= $form->field($model, 'bill_name')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'bill_address')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'bill_country_id')->dropDownList(ArrayHelper::map(Countries::find()
    ->all(), 'id', 'name'),['prompt'=>'Choose a Country'])->label('Select Country')  ?>


    <?= $form->field($model, 'bill_state')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'bill_city')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'bill_postal')->textInput(['maxlength' => true]) ?>



    <?= $form->field($model, 'bill_mobile')->textInput(['maxlength' => true]) ?>



    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-primary' : 'btn btn-success']) ?>
    </div>

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

</div>
</div>

script used

<script>
jQuery(document).ready(function($){ 

    // Enable on all forms
    $('form').dirtyForms();
});
</script>   

now if i try to go to other pages or link without saving i get popup meassege. But when i try to submit message even then the popup is appearing. why is that so?


Solution

  • i got it working

    <?php
    
    use yii\helpers\Html;
    use yii\widgets\ActiveForm;
    use app\models\Countries;
    use yii\helpers\ArrayHelper;
    
    /* @var $this yii\web\View */
    /* @var $model app\models\Organizations */
    /* @var $form yii\widgets\ActiveForm */
    ?>
    
    <link rel="stylesheet" href="<?php echo Yii::$app->request->baseUrl;?>/css/userHome.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00005/jquery.dirtyforms.min.js"></script>
    <div class="organizations-form">
        <h2>Update Billing Address</h2><br>
        <div class="col-md-10 col-md-offset2">
            <div class="ignore">
    
    
        <?php $form = ActiveForm::begin(); ?>
    
    
        <?= $form->field($model, 'bill_name')->textInput(['maxlength' => true]) ?>
    
    
        <?= $form->field($model, 'bill_address')->textInput(['maxlength' => true]) ?>
    
    
        <?= $form->field($model, 'bill_country_id')->dropDownList(ArrayHelper::map(Countries::find()
        ->all(), 'id', 'name'),['prompt'=>'Choose a Country'])->label('Select Country')  ?>
    
    
        <?= $form->field($model, 'bill_state')->textInput(['maxlength' => true]) ?>
    
    
        <?= $form->field($model, 'bill_city')->textInput(['maxlength' => true]) ?>
    
    
        <?= $form->field($model, 'bill_postal')->textInput(['maxlength' => true]) ?>
    
    
    
        <?= $form->field($model, 'bill_mobile')->textInput(['maxlength' => true]) ?>
    
    
    
        <div class="form-group ">
            <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-primary' : 'btn btn-success' ,'id'=>'update']) ?>
        </div>
    
        <?php ActiveForm::end(); ?>
    
    </div>
    </div>
    </div>
    
    <script>
    jQuery(document).ready(function($){ 
    
        // Enable on all forms
        $('form').dirtyForms();
        $('#update').click(function(){ 
        $('.ignore').addClass($.DirtyForms.ignoreClass);
            });
    
    
    });
    </script>   
    

    i checked whether the button is clicked. if yes then i used the ignore function in dirty form to the whole form(which is in div class="ignore") so when i click the button to submit there will be no popup's.