Грязная форма не работает

Question

Я хотел отслеживать формы на предмет изменений и предупреждать пользователя перед тем, как покинуть страницу. так что я использовал грязный плагин формы, найденный здесь

это код, который я попробовал

форма

  <?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>
jQuery(document).ready(function($){ 

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

Теперь, если я пытаюсь перейти на другие страницы или ссылку без сохранения, я получаю всплывающее окно. Но когда я пытаюсь отправить сообщение даже тогда, появляется всплывающее окно. Почему это так?

Answer 1

Я получил это работает

<?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>   

Я проверил, нажата ли кнопка. если да, то я использовал функцию игнорирования в грязной форме для всей формы (которая находится в div class="ignore"), поэтому, когда я нажимаю кнопку для подтверждения, всплывающих окон не будет.

Answer 2

Но когда я пытаюсь отправить сообщение даже тогда, появляется всплывающее окно. Почему это так?

Грязные формы пытаются игнорировать, когда происходит отправка, используя <input type="submit"> тег. Однако в JavaScript также можно отправить форму, щелкнув другие типы тегов формы (например, теги привязки).

Грязные формы по умолчанию будут интерпретировать любой щелчок тега привязки как попытку перехода со страницы. Если вы используете какой-то виджет JavaScript, который использует теги привязки для других целей, вы можете игнорировать их, помещая их в ignoreSelector, добавив ignoreClassили поместив их внутри элемента контейнера с ignoreClass, Смотрите игнорирование вещей для деталей.