jquery $ notation returns null for document element

Question

I am trying to use javascript to change a value of a select box on a ToysRUs address page. The project is an extension that fills out an address form automatically.

The item id is billingAddress.address.stateSelect

document.getElementById("billingAddress.address.stateSelect") // returns the element.

$("#billingAddress.address.stateSelect") // returns null.

I wanted to use $("#billingAddress.address.stateSelect").val("CA") to change the selection, but I cannot because it is null.

The page is using jQuery

    (typeof jQuery != 'undefined') // is true

I still get null after escaping the periods with backslashes.

s=document.getElementById("billingAddress.address.stateSelect").id;
console.log(s);
s= "#"+s.replace( /(:|\.|[|])/g, "\\$1" ); 
//also tried \\\\ backslashes and \\\ backslashes
console.log(s); //gives billingAddress\\.address\\.stateSelect
console.log($(s)); //is still null

In css, what would `#billingAddress.address.stateSelect` select? an element with an id of `billingAddress`, and the classnames `address` and `stateSelect`, right? jquery selectors are css selectors, and therefore certain special characters have to be escaped to select an id with said special characters. — Kevin B, Oct 19 '15 at 18:09
is `#billingAddress.address.stateSelect` an `id` of your element? — Victor Levin, Oct 19 '15 at 18:09
relevant: [How do I get jQuery to select elements with a . (period) in their ID?](http://stackoverflow.com/questions/350292/how-do-i-get-jquery-to-select-elements-with-a-period-in-their-id) — Paul Roub, Oct 19 '15 at 18:11
Like @KevinB suggests, the selector may be confusing the `.` as a class: `$("#billingAddress .addres .stateSelect")` where the getElementById would not do this. — Twisty, Oct 19 '15 at 18:12
As suggested above, escape your periods. See this fiddle: http://jsfiddle.net/xpcxekuq/2/ — Victor Levin, Oct 19 '15 at 18:14
Zealander -thanks for the demonstration. I will try escaping the periods. — techdog, Oct 19 '15 at 18:39
I still get null. I'm running this in the address bar of the toysrus address page. javascript:s=document.getElementById("billingAddress.address.stateSelect").id;alert(s);s= "#"+s.replace( /(:|\.|[|])/g, "\\$1" );alert(s);alert($(s)); — techdog, Oct 19 '15 at 19:18

score -1 · Answer 1 · answered Oct 19 '15 at 18:11

You didn't post your full code. Only things i can think of are 1: your code runs before select loaded, this case use $(function(){your code goes here}); 2: you can't use dots in names because browsers think it wants to tell it the dot is meaning class and not the part of the name.

score -1 · Answer 2 · answered Oct 19 '15 at 18:11

The $ notation won't necessarily work unless the jQuery has been aliased as $. Try using:

jQuery("#billingAddress.address.stateSelect");

instead of the $ sign.

Edit:

I didn't read the question carefully enough. The selector you are using is for an ID that also has two classnames, being "address" and "stateSelect". What I mentioned could still be an issue, but you need to make sure you are using the correct selectors first.

jquery $ notation returns null for document element

2 Answers2