CODEWITHSUNDEEP
jqueryyii2active-form
SaidbakR
SaidbakR

Reputation: 13544

Yii2 active form submit event invoked twice

This question had been asked before that question: Prevent multiple clicks and ActiveForm submission in Yii 2.0.10

Symptoms

I have an active form with id equals to surasGo. I attached submit event using Jquery to handle some tasks before submit. I noticed that any alert function in the event function is produced twice. I checked out the page HTML source and I found the following snippets:

...
jQuery('#surasGo').yiiActiveForm([], []);
});</script></body>

before the previous snippet there is linked javascript file contains my code:

$('#surasGo').submit(function(e){
    e.preventDefault();
    suraId = $('#surasId').val()*1;
    verseId = $('#versesId').val()*1;   
    if (!isNaN(verseId*1) && verseId !== 0){
      window.location = '/verses/view/'+verseId;
    }
    else if (!isNaN(suraId) && suraId !== 0){
      window.location = '/view/'+suraId;
    }
    else{
      alert(tError+"\n"+tQAccessError);// this alerted twice for example
    }
    return false;
  });

What I have tried

I realized that the first snippet jQuery('#surasGo').yiiActiveForm([], []); may be responsible for the double invoke of submit events due to active form client validation so I added 'enableClientValidation'=>false property to the active form:

 <?php $form = ActiveForm::begin(['id' => 'surasGo','enableClientValidation'=>false, 'action'...

However, the form is still seems to be undergo to submit event twice! What is the cause of this weird behavior and how to solve it?

Upvotes: 2

Views: 3616

Answers (4)

mrvovanda
mrvovanda

Reputation: 66

Try to return boolean false in "beforeValidate" method, like here:

$(document).on("beforeValidate", "#form_id", function (event, messages) {
      //console.log('beforeValidate');
      return false;
    });

Upvotes: 0

c0der
c0der

Reputation: 64

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

$form = ActiveForm::begin(['id' => 'my-form-id', 'validateOnSubmit' => false]);

Upvotes: 3

Jairus
Jairus

Reputation: 846

Works Like a Charm

I implemented and tested the following extension:

https://github.com/Faryshta/yii2-disable-submit-buttons

Composer Require

"faryshta/yii2-disable-submit-buttons": "*"

Register Asset Globaly

class AppAsset extends yii\web\AssetBundle
{
    public $depends = [
        'faryshta\\assets\\ActiveFormDisableSubmitButtonsAsset',
        // other dependencies
    ];
}

Usage

$form = ActiveForm::begin([
    'options' => ['class' => 'disable-submit-buttons'],
    // other configurations
]);

    // inputs

    Html::submitButton('Submit', [
        // optional, will show the value of `data-disabled-text` attribute
        // while handling the validation and submit
        'data' => ['disabled-text' => 'Please Wait']
    ])

$form->end();

Upvotes: 2

Nitin Pund
Nitin Pund

Reputation: 1092

I think you also need to stop executing any downstream chain of event handlers. This can be done by calling event.stopImmediatePropagation() in addition to event.preventDefault().

Try like this :

$('#surasGo').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation(); // this is required in some cases
    suraId = $('#surasId').val()*1;
    verseId = $('#versesId').val()*1;   
    if (!isNaN(verseId*1) && verseId !== 0){
      window.location = '/verses/view/'+verseId;
    }
    else if (!isNaN(suraId) && suraId !== 0){
      window.location = '/view/'+suraId;
    }
    else{
      alert(tError+"\n"+tQAccessError);// this alerted twice for example
    }
    return false;
  });

Upvotes: 3

Related Questions