Как предотвратить отправку двойным кликом

Question

Я создал форму регистрации , используя ActiveForm в yii2, двойной щелчок , форма отправляется, она отправляется автоматически. Как мне предотвратить это, я хочу отправить форму, просто нажав на кнопку отправить.

почему это происходит и каково решение?

Это мой код формы:

$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

Вы можете использовать js-событие ActiveForm beforeSubmit, чтобы отключить кнопку во время отправки формы, вы можете использовать CSS pointerEvents:'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);