CODEWITHSUNDEEP
javascriptjqueryhtml
Silvio S.
Silvio S.

Reputation: 547

jQuery event doesn't fire

I can't understand why my function doesn't fire, maybe I'm wrong with the selector ?

HTML:

<html>
{% include head.html %}
    <body id="general">

            <header>

                {% include navbar.html %}

                <script>
                $('input[name=optradio])'.click(function () {
                    if (this.id == "showdiv") {
                        $("#onsaanbod").show('slow');
                    } else {
                        $("#onsaanbod").hide('slow');
                    }
                }); 
                </script>

            </header>

            <div class="container-fluid">

                <!-- contenttop -->
                <div class="row"  style="padding-top: 3%; padding-bottom: 3%;" >
                    {% include /getaquote/contenttop-getaquote.html %}
                </div>

                <div class="col-md-12 col-lg-10 col-lg-offset-2">
    <div class="row">
        <div class="col-md-12">
            <p> content </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <hr>
        </div>
    </div>

    <!-- start-form -->
    <!-- Volume -->
    <div class="row">
        <div class="col-md-6">
            <p> content </p>

        </div>

        <div class="col-md-6">
            <div class="controls">
                <form id='form-id'>
                <div class="radio">
                    <label><input type="radio" name="optradio">Meer dan 1000 per jaar</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">Tussen 500 en 1000 per jaar</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" id="showdiv">Minder dan 500 per jaar</label>
                </div>
                </form>
            </div>

        </div>

    </div>

    <div class="row" id="onsaanbod" style='display:none'>
        <div class="col-md-12">
            <h1 class="titlel1"> content </h1>
            <p> content </p>
        </div>
    </div>


</div>

I want to display the second div when the user clicks on the third radio button. I tried to change the position of the script but I don't think it is the problem. I'm sure that It is a trivial issue. It doesn't work!

        <!-- footer -->
        {% include footer.html %}

        </div>
</body>

Upvotes: 0

Views: 86

Answers (5)

MazzCris
MazzCris

Reputation: 1830

There's a typo:

$('input[name=optradio])'.click
$('input[name=optradio]').click

and

You should move your js at the bottom of the body, or wrap it in a $(document).ready() method

$(document).ready(function(){
    $('input[name=optradio]').click(function () {
        if (this.id == "showdiv") {
            $("#onsaanbod").show('slow');
        } else {
            $("#onsaanbod").hide('slow');
        }
    }); 
});

It is to make sure the element exists when you apply che click listener to it

Upvotes: 3

Saswat
Saswat

Reputation: 12856

If you are already taking id, why not use it on first hand?

Make sure you have 1.7+ version of jquery to use prop

     <script>
        $(document).ready(function()
        {
            $('#showdiv').click(function()
            {
              if($(this).prop("checked"))
              {
                $("#onsaanbod").show('slow');
              }
              else
              {
                $("#onsaanbod").hide('slow');
              }
             });
        }); 
     </script>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Wrap the whole code inside:

$(document).ready(function(){
  // Here..
});

This will execute only after all the DOM Elements are loaded.

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

You must wrap your code into:

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

There is some reference.

Upvotes: 0

Starfish
Starfish

Reputation: 3584

You'll have to wrap your code in 

$(document).ready(function(){
 //Code
});

This will ensure the script fires after the page has loaded and thus has it resources to use. In your case your code would look like this:

$(document).ready(function(){
  $('input[name=optradio]').click(function () {
    if (this.id == "showdiv") {
      $("#onsaanbod").show('slow');
    } else {
      $("#onsaanbod").hide('slow');
    }
  }); 
});

Upvotes: 2

Related Questions