How do I do an action after three dynamic elements are populated with jQuery / javascript?

7

I have three select that are created after the user clicks a button, ie they are dynamic:

<select id="cbExercicio"><option value="0"></option></select>
<select id="cbEquipe"><option value="0"></option></select>
<select id="cbResponsavel"><option value="0"></option></select>

I'm doing this for when to modify just one of them:

$(document).on('change', '#cbExercio', function(){
      // Ação
})

But I want a fucnction that is called as soon as the user populates the three and they are nonzero (which is the first blank option with value 0). How to do or what better way to do ??

    
asked by anonymous 27.01.2014 / 16:08

2 answers

8

You can check the change event of the three selects, starting with a check on the value of each of them.

So, for example:

$(document).on('change', '#cbExercicio, #cbEquipe, #cbResponsavel', function(){
    if(+$('#cbExercicio').val() != 0 && +$('#cbEquipe').val() != 0 && +$('#cbResponsavel').val() != 0) {
       // Ação
    } else {
       // Ao menos um dos selects está com valor 0
    }
});

Demo no jsfiddle

    
27.01.2014 / 16:48
5

It is possible to solve the problem in a more generic way, that is, by creating a kind of group of fields using CSS classes.

A possible HTML would look like this:

<select class="meu_grupo" id="cbExercicio"><option value="0"></option><option value="1">1</option></select>
<select class="meu_grupo" id="cbEquipe"><option value="0"></option><option value="1">1</option></select>
<select class="meu_grupo" id="cbResponsavel"><option value="0"></option><option value="1">1</option></select>

Then the code looks like this:

$(function() {
    $('.meu_grupo').change(function() {

        //itera sobre os elementos
        var falta_preencher = false;
        $('.meu_grupo').each(function() {
            if (!this.selectedIndex) falta_preencher = true;
        });

        //verifica o resultado
        if (falta_preencher) alert('Preencha todos...')
        else alert('Preencheu todos!');

    })
});

See jsfiddle running .

The idea is to put a change event on all fields that have the class meu_grupo and, when an event occurs, check that all fields in the same group are properly populated.

Obviously, the type of validation and the resulting action of all fields are correct is at the discretion of the implementation.

Note that I linked the change event directly to fields with the meu_grupo class, as this is more efficient than capturing all document events and filtering only the desired fields. Unless you have other reasons for using the on handler in the document, give preference to specific events. Follow the same example using on :

$(function() {
    $(document).on('change', '.meu_grupo',  function() {

        //itera sobre os elementos
        var falta_preencher = false;
        $('.meu_grupo').each(function() {
            if (!this.selectedIndex) falta_preencher = true;
        });

        //verifica o resultado
        if (falta_preencher) alert('Preencha todos...')
        else alert('Preencheu todos!');

    })
});

Note also that the validation of my example will do an implicit conversion of the text "0" to false . The effect would be the same if the value of the first element was empty.

    
27.01.2014 / 16:57