肮脏的形式不工作

Question

我想监视表单的变化，并在离开页面之前提醒用户。所以我使用了一个脏表单插件

这是我试过的代码

形式

  <?php
use yiihelpersHtml;
use yiiwidgetsActiveForm;
use appmodelsCountries;
use yiihelpersArrayHelper;
/* @var $this yiiwebView */
/* @var $model appmodelsOrganizations */
/* @var $form yiiwidgetsActiveForm */
?>
<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

但是当我尝试提交消息时，即使弹出窗口出现。为什么会这样呢?

Dirty Forms试图通过使用<input type="submit">标记来忽略提交。但是，使用JavaScript也可以通过单击其他类型的表单标记(例如锚标记)来提交表单。

Dirty Forms默认情况下会将任何锚标记点击解释为试图从页面导航。如果您正在使用一些将锚标记用于其他目的的JavaScript小部件，则可以通过将它们放在ignoreSelector中，添加ignoreClass或将它们放入具有ignoreClass的容器元素中来忽略它们。

Answer 2

我成功了

<?php
use yiihelpersHtml;
use yiiwidgetsActiveForm;
use appmodelsCountries;
use yiihelpersArrayHelper;
/* @var $this yiiwebView */
/* @var $model appmodelsOrganizations */
/* @var $form yiiwidgetsActiveForm */
?>
<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="忽略")，所以当我点击按钮提交，将没有弹出的