How to prevent submit by double click - php

Question

I created signup form using with ActiveForm in yii2, by double click, form submits, it submits automaticaly. How do I prevent it, I want form submit just by click on submit button.
why this happens and what's the solution?
This is my form code:
$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

You can use the ActiveForm's js event beforeSubmit to disable the button at the time the form is submitted, you can use CSS pointerEvents:'none' to disable the click on the button.
Assing an id="my-form" to your form and id="my-submit" to your submit button and use the below script on top of your view and your button will be disabled at the time of submission.
$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);