Onchange event not working when placed on the body

Asked

Viewed 506 times

-2

I wrote this function to validate some form specific radio Buttons. As my page is in PHP and I do include from the top and footer, the function works when it is in footer.php, but since the function does not apply to all pages, I have to put individually on the body of the specific pages. When I do this mysteriously it doesn’t work and reports errors on the console.

$(function(){

    $('body').on( 'change', ':radio', function(){
        if( $('input[value="3"]:checked').length > 5 ){
             alert('Somente 5 opções críticas podem ser marcadas');
            $(this).prop({ checked : false });
        }
    });

});
javascript jquery
  • 1

    Works for me. You can post your HTML? http://jsfiddle.net/WSbE5/ Note that this selector only looks for inputs with value="3"

  • When you put in the BODY Are you loading jQuery before that code is read? Or only load jQuery at the bottom of the page? You get an error in the browser console?

  • Boy, my HTML has 2000+ lines. = p

  • @Zuul Yes, jQuery is in header.php, that is, at the top between the <head></head>

  • @Leandroruel, your checkboxes are in HTML value="3" ? You have a link?

  • 1

    And regarding what Sergio asked about the limitation that your code has to only work with input whose value is 3? Did you notice that particularity? Ps: You can make a test of this kind to know if the code works but does not match with your elements.

  • @Zuul found that it was this same, the value of the form was different, as the form is super large, it was being difficult to search all inputs, it was with value "a|3", now I have arranged here.

  • @Sergio Responde tackling the problem so Leandro Ruel can close this issue. And Leandro nothing like a good test ;)

  • 3

    This question seems to be discounted because it is too localized

  • @Zuul was a mistake.

  • @Leandroruel Is a common problem to all programmers and happens to all :)

Show 6 more comments

2 answers

1

The problem here seems to be that HTML does not have what the selector was looking for.

When you use:

 $('input[value="3"]:checked')

Are you saying to track down elements like input whose value in the attribute value be equal to 3 and whose state is checked.

As you can see in this example, the code works. On the other hand you can make use of this example to find out if in your environment the code is actually using but not finding results with the selector you applied.

Upon your commentary:

@Zuul found that it was just that, the value of the form was different, as the form is super large, it was being difficult to search all inputs, it was with value "a|3", now I tidied up here. - Leandro Ruel

We know your selector was looking value="3" and the HTML had value="a|3", making so is question "Too Localized" as it is a typo that will hardly help anyone in the future.

0

Hello,

you have placed your scripts within some load check function?

From what you’ve said, it only works when you put it in the footer, after the page loads.

Try with Document.ready, so it checks if all DOM has been loaded before applying the function.

$(document).ready(function(){

    $('body').on( 'change', ':radio', function(){
        if( $('input[value="3"]:checked').length > 5 ){
             alert('Somente 5 opções críticas podem ser marcadas');
             $(this).prop({ checked : false });
        }
    });

});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.