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>

现在，如果我尝试去其他页面或链接而不保存，我会得到popup meassege。但是，当我尝试提交消息时，即使弹出窗口正在出现。为什么会这样？

Answer 1

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

Dirty Forms尝试使用<input type="submit">标记忽略提交时间。但是，使用JavaScript，还可以通过单击其他类型的表单标记（例如锚标记）来提交表单。

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

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>

我检查了按钮是否被点击了。如果是，那么我使用脏表格中的忽略功能到整个表格（在div class =＆＃34;忽略＆＃34;）所以当我点击按钮提交时，将没有弹出窗口。< / p>

脏表格不起作用

2 个答案: