臟表格不起作用

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

但是，即使我嘗試提交消息，也會出現彈出窗口。 為什么會這樣？

臟表單嘗試使用<input type="submit">標記忽略提交的時間。 但是，使用JavaScript，也可以通過單擊其他類型的表單標簽（例如定位標簽）來提交表單。

默認情況下，“臟表單”會將任何錨定標記單擊解釋為嘗試從頁面導航。 如果您正在使用一些將錨標記用於其他目的的JavaScript小部件，則可以通過將其放入ignoreSelector ，添加ignoreClass或將它們放入帶有ignoreClass的容器元素中來忽略它們。 有關詳細信息，請參見忽略事物 。

Answer 2

我知道了

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

我檢查是否單擊了按鈕。 如果是的話，那么我會以臟形式將ignore函數用於整個表單（位於div class =“ ignore”中），因此當我單擊提交按鈕時，將不會出現彈出窗口。