jquery ("#field") is null

Hello,

I have a selectbox with month periods in it.

Here is my code:

$(function(){ 
                        $("#ppsub_ppterm_id").change(function(){ 
                                        var term = this.options[this.selectedIndex].text; 
                                        if(term == "Eenmalig"){ 
                                                $(".idealtd").show(); 
                                        }else{ 
                                                $(".idealtd").hide(); 
                                                //$("#ppsub_amount option:selected").val('anders'); 
                                        } 
                        }); 
        }); 
<select name="ppsub_ppterm_id" class="ppsub_ppterm_id" 
id="ppsub_ppterm_id" style="width: 100px; font-size: 11px;"> 
                                                <option value="M">Maand</option> 
                                                <option value="K">Kwartaal</option> 
                                                <option value="H">Halfjaar</option> 
                                                <option value="J">Jaar</option> 
                                                <option selected value="E">Eenmalig</option> 
                                        </select>

But when i load my page i staight away get an error:

$("#ppsub_ppterm_id") is null

Line 17

any idea's?

From stackoverflow

• Make sure you're running your jQuery code after the document is loaded:

  $(document).ready(function() { /* put your stuff here */ });
  

  Also make sure you have no other controls with the id "ppsub_ppterm_id" on your HTML page.

  Those are the first things I would check.

  Amr ElGarhy : $(function() is shortcut to $(document).ready(function()

  Brandon Montgomery : Oh, sweet - good to know.

• Even if jQuery couldn't find the element, it wouldn't be null - it would be an empty jQuery object.

  Are you sure jQuery is loaded? Is it possible that another JavaScript library you're using is causing conflicts?

• Sounds like JQuery isn't loading properly. Which source/version are you using?

  Alternatively, it could be namespace collision, so try using jQuery explicitly instead of $. If that works, you may like to use noConflict to ensure the other code that's using $ doesn't break.

  sanders :

• Here is all the code:

   $(document).ready(function(){
  
    $("#ppsub_ppterm_id").change(function(){
      var term = this.options[this.selectedIndex].text;
  
      if(term == "Eenmalig"){
       $(".idealtd").show(); 
      }else{
       $(".idealtd").hide(); 
       //$("#ppsub_amount option:selected").val('anders');
      }
    });
  
  
  
  });
  

  So it first loads the page and then access the dom. But still gives the same error.

  Adam Backstrom : FYI, $(function(){}) is synonymous with $(document).ready(function(){}). http://docs.jquery.com/Core/jQuery#callback

  Mark : Adam: check the code at the top of the page, and the various comments at the bottom here.

• you have "ppsub_ppterm_id" as a class, name, id etc...

  You need to pick ONE and select on it. There is no need for ID, NAME, CLASS to all have the same values.

  You're probably confusing the hell out of jQuery.

  <a id="ppsub_ppterm_id"> = $("#ppsub_ppterm_id")
  
  <a class="ppsub_ppterm_id"> = $(".ppsub_ppterm_id")
  
  <a name="ppsub_ppterm_id">  = $("*[name=ppsub_ppterm_id]")
  

  Pick a way and go with it, but take out all those redundant attributes.

  sanders : "You're probably confusing the hell out of jQuery." ;-)

• chane '$' by jQuery for example:

  $("#myId") -> jQuery("#myId")

  It works

• $("#myId") doesn't seems to be working for me too jQuery("#myId") does. dono what the problem is :(

• @Eduardo - that worked for me. i didnt know you could just use "jQuery" instead of the ($) dollar sign. its weird that it read the element as null, even weirder that it did it only on some pages and not others

  anyway, thanks, it worked for me