Question

I use a piece of JQuery code with a bit of Mootools to change the class of some inputs but the thing is that it doesn’t work (has no effect) in Google Chrome despite working perfectly in Firefox.

Edit : I’ve discovered that if I click two times on the given element on the page the class gets effectively added.

my code

<script type="text/javascript">
  window.addEvent('domready', function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
     // code inside works perfectly
});

$('votconj_no').addEvent('click', function() {
    // code inside works perfectly
});

$('nb_children').addEvent('click', function() {
  var selected = $('nb_children').getSelected();


  selected.each(function(element) {
  var val = element.get('value');
  for (var counter = 1; counter <= val; counter++) {
    $('jj_enfant' + counter).addClass("validate['required']");
    myCheck.register($('jj_enfant' + counter));
    $('mm_enfant' + counter).addClass("validate['required']");
    myCheck.register($('mm_enfant' + counter));
    $('aaaa_enfant' + counter).addClass("validate['required']");
    myCheck.register($('aaaa_enfant' + counter));
    $('last_name_enfant' + counter).addClass("validate['required','nodigit']");
    myCheck.register($('last_name_enfant' + counter));
    $('first_name_enfant' + counter).addClass("validate['required','nodigit']");
    myCheck.register($('first_name_enfant' + counter));
    // Here the good value is displayed
    alert(val);
  }

  for (var counter = parseInt(val)+1; counter <= 6; counter++) {
    $('jj_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('jj_enfant' + counter));
    $('mm_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('mm_enfant' + counter));
    $('aaaa_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('aaaa_enfant' + counter));
    $('last_name_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('last_name_enfant' + counter));
    $('first_name_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('first_name_enfant' + counter));
  }
  });
});

})
...
</script>

Answer 1

The following code works great (I’ve changed the event from click to blur and I’ve made the code a bit simpler and cleaner by getting only the last element of the array selected).

<script type="text/javascript">
  window.addEvent('domready', function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
      // code inside works
    });

    $('votconj_no').addEvent('click', function() {
     // code inside works
    });

    $('nb_children').addEvent('blur', function() {
       var selected = $('nb_children').getSelected();

       var element = selected.getLast();

       var val = element.get('value');
       for (var counter = 1; counter <= val; counter++) {
          $('jj_enfant' + counter).addClass("validate['required']");
          myCheck.register($('jj_enfant' + counter));
          $('mm_enfant' + counter).addClass("validate['required']");
          myCheck.register($('mm_enfant' + counter));
          $('aaaa_enfant' + counter).addClass("validate['required']");
          myCheck.register($('aaaa_enfant' + counter));
          $('last_name_enfant' + counter).addClass("validate['required','nodigit']");
          myCheck.register($('last_name_enfant' + counter));
          $('first_name_enfant' + counter).addClass("validate['required','nodigit']");
          myCheck.register($('first_name_enfant' + counter));
       }

       for (var counter = parseInt(val)+1; counter <= 6; counter++) {
          $('jj_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('jj_enfant' + counter));
          $('mm_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('mm_enfant' + counter));
          $('aaaa_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('aaaa_enfant' + counter));
          $('last_name_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('last_name_enfant' + counter));
          $('first_name_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('first_name_enfant' + counter));
       }

    });

})
...
</script>