AJAX форма отправить событие прилагается дважды

У меня есть форма поверх всплывающего окна, и для отправки этой формы я должен написать собственный код

код формы поверх всплывающего окна:

<div id="add-role" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div id="bank-details-form" >
                <div class="card">
                    <div class="card-header card-header-text" data-background-color="rose">
                        <h4 class="card-title">Add Role</h4>
                    </div>
                    <div class="user-form  card-conten">
                        <div class="container-fluid">

                            <?php 
                            $roleModel = new appmodels
olelist();
                            $form = ActiveForm::begin([
                                'layout' => 'horizontal',
                                'id' => 'role-form',
                                'enableClientValidation'=> false,
                                'fieldConfig' => [
                                    'options' => [
                                        'class' => 'form-group row',

                                    ],
                                    'horizontalCssClasses' => [
                                        'label' => 'col-sm-4 label-on-left',
                                        'offset' => 'col-sm-offset-4',
                                        'wrapper' => 'col-sm-6',
                                    ],
                                ],
                            ]); ?>
                            <div class="row form-group field-users-middel_name">

                                <?= $form->field($roleModel, 'role_name')->textInput(['maxlength' => true]) ?>
                                <?= $form->field($roleModel, 'status')->dropdownList(Yii::$app->params['status']) ?>

                                    <?= User::showLoader() ?>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-6">
                        <?= Html::submitButton('Save', ['class' => 'btn btn-success center-block']) ?>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <?php ActiveForm::end(); ?>
            </div>
        </div>

    </div>
</div>

Код Jquery:

$('#role-form').submit(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            var roleName = $("#rolelist-role_name").val();
            if(roleName != ""){
                $(".loader-div").css({display : 'block'});
                var data = $(this).serialize();
                $.ajax({
                    url : "<?= Url::toRoute('rolelist/createajax') ?>",
                    type : 'POST',
                    data : data,
                    success : function(responce){
                        $(".loader-div").css({display : 'none'});
                        var res = JSON.parse(responce);
                        if(res.result){
                            $("#user-role_id").append('<option value="'+res.data.id+'">'+res.data.role_name+'</option>')
                        }
                        $("#add-role").modal("hide");
                    }
                })
            }
        });

В окне проверки я вижу, что к форме прикреплены два события отправки, одно из которых является моим пользовательским, а другое - yii.activeForm.js.

Есть идеи, как удалить событие submit, прикрепленное activeForm?

jquery ajax yii2

Всего 2 ответа

Это потому, что вы связываете ActiveForm как обычную форму, когда вы используете Yii2 ActiveForm и она имеет свои собственные события, которые вы должны использовать.

Так что в вашем случае вы должны изменить

$('#role-form').submit(function(event) {

});

$('#role-form').on('beforeSubmit', function(event) {

});

и не забудьте добавить return false в конец события, которое вы связываете, ваш полный код должен выглядеть следующим образом

$('#role-form').on('beforeSubmit', function (event) {
    event.preventDefault();
    var roleName = $("#rolelist-role_name").val();
    if (roleName != "") {
        $(".loader-div").css({
            display: 'block'
        });
        var data = $(this).serialize();
        $.ajax({
            url: "<?= Url::toRoute('rolelist/createajax') ?>",
            type: 'POST',
            data: data,
            success: function (responce) {
                $(".loader-div").css({
                    display: 'none'
                });
                var res = JSON.parse(responce);
                if (res.result) {
                    $("#user-role_id").append('<option value="' + res.data.id + '">' + res.data.role_name + '</option>')
                }
                $("#add-role").modal("hide");
            }
        });
    }
    return false;
});

Установка 'validateOnSubmit' => false для ActiveForm работала для меня.