Question posted in
You can find the official documentation here.

Jquery ajax – ajax form submit event attached twice

I have form over pop-up and to submit this form I have write custom code

form code over popup:

<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 appmodelsrolelist();
                            $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 code:

$('#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");
                    }
                })
            }
        });

In inspect window I can see that there are two submit events attached with the form one is my custom event and another is attached by yii.activeForm.js

Any idea how to remove submit event attached by activeForm?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Setting 'validateOnSubmit' => false for the ActiveForm worked for me.


  2. 0

    It is because you are binding the submit like a normal form where as you are using Yii2 ActiveForm and it has its own events that you should use.

    So in your case you should change the

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

});

    to 

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

});

    and dont forget to add the return false in the end inside of the event you are binding, your complete code should look like below

    $('#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;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search