骯髒的表單無法正常工作

Question

我想監視更改的表單並在離開頁面之前提醒用戶。所以我用一個骯髒的形式插件found here

這是我試圖

代碼

形式

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

現在，如果我嘗試去其他網頁或鏈接沒有保存我彈出meassege。但是，當我嘗試提交消息，即使彈出窗口出現。 這是爲什麼呢？

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來忽略它們。詳細信息請參見ignoring things。