Yii2. Почему Событие submit на форме срабатывает дважды?

Question

[dmitry82]

Событие submit на форме #login-form срабатывает дважды. Весь день на это потратил, так и не понял причину. Помогите пожалуйста. Устанавливал enableClientValidation, enableAjaxValidation в false, ничего не помогло.

$("#save").on('click', function() {
        $('.popup_overlay').show();
        $('#login').show();
        $('#login-form').on('submit', function(event) {
            alert('test');
           /* var config = getConfig();
            event.preventDefault();
            event.stopImmediatePropagation();
              $.ajax({
                  url: 'index.php?r=site%2Flogin',
                  type: 'POST',
                  data: {config: config, Login: { email: '[e-mail]', password: '5i6i7i8i'} },
                  success: function(response) {
                     //window.location = response.route;
                       console.log(response.success);
                      console.log(response.route);
                  }
              });*/
        });
    });

Форма:

<?php $form = ActiveForm::begin(['id'=>'login-form', 'action'=>['site/login'], 'options'=>['style'=>'display:none']]); ?>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'email')->textInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите вашу почту'])->label(false) ?>
                <i class="glyphicon glyphicon-user input-icon" aria-hidden="true"></i>
            </div>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'password')->passwordInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите пароль'])->label(false) ?>
                <i class="glyphicon glyphicon-asterisk input-icon" aria-hidden="true"></i>
            </div>
            <?= Html::submitButton('Авторизоваться', ['class'=>'btn btn-submit', 'id'=>'login-btn']) ?>
            <?php ActiveForm::end(); ?>

Comments

[dmitry82]

Разметка:

<?php $form = ActiveForm::begin(['id'=>'login-form', 'action'=>['site/login'], 'options'=>['style'=>'display:none']]); ?>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'email')->textInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите вашу почту'])->label(false) ?>
                <i class="glyphicon glyphicon-user input-icon" aria-hidden="true"></i>
            </div>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'password')->passwordInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите пароль'])->label(false) ?>
                <i class="glyphicon glyphicon-asterisk input-icon" aria-hidden="true"></i>
            </div>
            <?= Html::submitButton('Авторизоваться', ['class'=>'btn btn-submit', 'id'=>'login-btn']) ?>
            <?php ActiveForm::end(); ?>

Answer 1

[Dmitry Bay]

У вас два события сразу запускаются.
Один на click кнопки,
другой - сабмит формы в activeform.

Answer 2

[Александр Пашкевич]

А можно вашу разметку увидеть?
Я сделал вот такой пример и все прекрасно работает:

Comments

[dmitry82]

<?php $form = ActiveForm::begin(['id'=>'login-form', 'action'=>['site/login'], 'options'=>['style'=>'display:none']]); ?>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'email')->textInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите вашу почту'])->label(false) ?>
                <i class="glyphicon glyphicon-user input-icon" aria-hidden="true"></i>
            </div>
            <div class="form-group form-icon">
                <?= $form->field($login_model, 'password')->passwordInput(['class'=>'form-control darkStyle', 'placeholder'=>'Введите пароль'])->label(false) ?>
                <i class="glyphicon glyphicon-asterisk input-icon" aria-hidden="true"></i>
            </div>
            <?= Html::submitButton('Авторизоваться', ['class'=>'btn btn-submit', 'id'=>'login-btn']) ?>
            <?php ActiveForm::end(); ?>

Answer 3

[Дмитрий]

Добрый вечер.
Разделите два события и должно всё получиться.
Вызываете click показываете нужные блоки. Вызываете submit - отправляете форму.
Вот как-то так:

$("#save").on('click', function() {
        $('.popup_overlay').show();
        $('#login').show();
})
$('#login-form').on('submit', function(event) {
   alert('test')
})

Comments

[dmitry82]

Пробовал так, не помогло(

[Дмитрий]

dmitry82, я так понимаю, что #save это кнопка в форме #login-form?

[dmitry82]

slo_nik, нет, по нажатию на кнопку #save всплывает окно с авторизацией и в этом окне форма #login-form

[Дмитрий]

dmitry82, всё равно, разделите код. И покажите html(добавить в вопрос, НЕ ответом на комментарий)

[dmitry82]

Добавил

[Boris Köln]

Да, надо $('#login-form').on('submit'... вынести вне $("#save").on('click'.... Иначе при каждом клике "показать" устанавливается ЕЩЕ ОДИН дубль сабмита.

[Дмитрий]

dmitry82, Вы не весь добавили. Где полностью, с кнопкой #save, всплывающими окнами?

[Дмитрий]

dmitry82, ещё проверьте не вызывается ли отправка формы ещё где-то. Возможно продублировали код.