How to implement form events

You are viewing revision #10 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#9)

You have that, when a product is on development they can change its API anytime. This change is quite important though, its related on how to set the events of your form, for example, the useful beforeSubmit.

Before, we could do that easily on an 'ActiveForm's property but now we have to do some extra work and register the javascript event your self.

Now, lets imagine we wish to deal with a 'beforeSubmit' event on our form:

<?php $form = ActiveForm::begin(
    [
        // make sure you set the id of the form
        'id' => $model->formName(), 
        'action' => ['yada/create']
    ]
);?>

<!-- more stuff here -->

<?php ActiveForm::end();?>

In order to register your beforeSubmit event, we will have to register the event this way:

<?php
$js = <<<JS
// get the form id and set the event
$('form#{$model->formName()}').on('beforeSubmit', function(e) {
   var \$form = $(this);
   // do whatever here, see the parameter \$form? 
   // is a jQuery Element to your form
}).on('submit', function(e){
    e.preventDefault();
});
JS;

$this->registerJs($js);

And thats it... hope you find it useful. Its a bit confusing at first when you do not know what has just happened.

NOTE: You can prevent the form from being submitted by returning false. Returning either true, null or undefined will cause the form to be submitted. See below:

$js = <<<JS
$('body').on('beforeSubmit', 'form#{$model->formName()}', function () {

    var form = $(this);

    if (form.find('.has-error').length) {
        return false;
    }
    
    // return undefined; // form gets submitted
    // return null; // form gets submitted
    // return true; // form gets submitted
    return false; // form does not get submitted

});
JS;

$this->registerJs($js);

When using return false to prevent submission, there is no need to use e.preventDefault() on the submit event:

<?php
$js = <<<JS
// get the form id and set the event
$('form#{$model->formName()}').on('beforeSubmit', function(e) {
    // return false to prevent submission
    return false;
}).on('submit', function(e){    // can be omitted
    e.preventDefault();         // can be omitted
});
JS;
 
$this->registerJs($js);

2amigOS!
web development has never been so fun
www.2amigos.us