php - 如何防止通过双击提交
问题描述
我在yii2中使用with创建了注册表单,双击,表单提交,它自动提交。如何防止它,我想通过单击提交按钮提交表单。ActiveForm
为什么会发生这种情况,解决方案是什么?
这是我的表单代码:
$form = ActiveForm::begin([
'enableAjaxValidation' => true,
]);
?>
<?=$form->field($model, 'nickname', ['addon' => ['prepend' => ['content' => '<i class="glyphicon glyphicon-option-horizontal"></i>']]])->label(false)->textInput()?>
<?=$form->field($model, 'phone_number', ['addon' => ['prepend' => ['content' => '<i class="glyphicon glyphicon-option-horizontal"></i>']]])->label(false)->textInput()?>
<?=$form->field($model, 'email', ['addon' => ['prepend' => ['content' => '@']]])->label(false)->textInput()?>
<?=$form->field($model, 'password', [
'addon' => ['prepend' => ['content' => '<i class="fa fa-key"></i>']]])->passwordInput(['autocomplete' => 'off'])->label(false)->passwordInput();
?>
<div class="form-group">
<?=Html::submitButton(Yii::t('app', 'Signup'), ['value' => 'signupp', 'class' => 'btn btn-primary', 'name' => 'signupButton', 'style' => 'width:100%;'])?>
</div>
<?php ActiveForm::end();?>
解决方案
可以在提交表单的时候使用ActiveForm
's js 事件beforeSubmit
来禁用按钮,可以使用 CSSpointerEvents:'none'
来禁用对按钮的点击。
id="my-form"
为您的表单和id="my-submit"
提交按钮添加一个并在您的视图顶部使用以下脚本,您的按钮将在提交时被禁用。
$js =<<< JS
$("#my-form").on("beforeSubmit",function(e){
e.preventDefault();
$("#my-submit").css({pointerEvents:'none'});
return true;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
推荐阅读
- python - 如果条件评估为真,如何避免在 IF 检查和返回语句中重复函数调用?
- tableau-api - 如何在 Tableau 中编写一个计算字段来计算价格标签丢失(null)且价格 <> 99 美元的产品数量?
- rabbitmq - RabbitMQ 队列中未确认的消息数
- jenkins - Jenkins:仅在选定的 SVN 修订版上触发
- asp.net - 如何在 MVC 中显示来自外键的数据块的名称
- sql - 如何将新数据从本地表插入到远程表但不复制现有数据
- javascript - 期望在reactjs上的箭头函数末尾返回一个值如何解决此错误?
- dc.js - 如何将函数应用于 DC.js 中的数组
- android - 如果它们在滚动视图的可见屏幕中,如何仅加载回收器视图的数据?
- swift - 当我尝试隐藏 SKSpriteNode 时没有响应(剧透:SKAction 计时问题)