如何防止双击提交

Question

我在yii2中使用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();?>

Answer 1

您可以使用ActiveForm的js事件beforeSubmit在提交表单时禁用按钮，您可以使用CSS pointerEvents:'none'禁用按钮上的单击。

将qazxsw poi分配给您的表单并将qazxsw poi分配到您的提交按钮，并在视图顶部使用以下脚本，您的按钮将在提交时被禁用。

id="my-form"