脏表格不起作用

Posted 2023-05-09

【中文标题】脏表格不起作用

【英文标题】：Dirty form not working

【发布时间】：2016-01-03 03:40:56

【问题描述】：

我想在离开页面之前监控表单的变化并提醒用户。所以我使用了一个脏表单插件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>   

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

【问题讨论】：

请提供相关的html？

发布呈现的 HTML

标题表单给出的代码是具有表单的视图，它是正在呈现的页面。它是一个 yii2 代码

【参考方案1】：

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

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

默认情况下，脏表单会将任何锚标记单击解释为尝试从页面导航。如果您正在使用一些将锚标记用于其他目的的 JavaScript 小部件，您可以通过将它们放在 ignoreSelector 中、添加 ignoreClass 或将它们放在带有 ignoreClass 的容器元素中来忽略它们。详情请见ignoring things。

【参考方案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="ignore" 中）使用了脏表单中的忽略功能，所以当我单击按钮提交时，不会有弹出窗口。

【讨论】：

几句话就好了。