jQuery not finding element using id

Question

I've got a simple HTML form and for some reason jQuery cannot find the element I'm looking for.

HTML:

    <form id="form">
                            <fieldset>
                    <table>
                        <tr class="row">
                            <td class="label">Street</td>
                            <td class="field"><input type="text" size="50" value="" id="s.street"></td>
</tr>
</table>
</fieldset>
        <fieldset>
                        <tr class="row">
                            <td class="label">Street</td>
                            <td class="field"><input type="text" size="50" value="" id="b.street"></td>
</tr>
</table>
</fieldset>
        </form>

jQuery :

$(document).ready(
                function() {

                    $("input[id='s.street']").keyup(function() {
                    $('#b.street').val($(this).val());

                    });
});

I get no errors in the console log.

`$('#b.street')` says find me the element with the id of "b" and it also must have a class of "street". Read the docs on jQuery selectors. — James Kleeh, Dec 15 '12 at 03:46

score 4 · Answer 1 · answered Dec 15 '12 at 03:48

4

If the element HAS to have that exact id, use:

$('#b\\.street')

answered Dec 15 '12 at 03:48

James Kleeh

12,094
5
34
61

score 2 · Answer 2 · answered Dec 15 '12 at 03:53

2

ID's should be unique, so you shouldn't have to filter with the input tag. Additionally, you need to add an escape sequence before the . in your ID name. $('#s\\.street') is the correct selector. I would actually suggest not using the ....

answered Dec 15 '12 at 03:53

Absolutely.. if possible get rid of the '.'.. or 'period' as the americans call it (At 29 I still chuckle when calling a full stop a period). – qooplmao Dec 15 '12 at 03:56

score 0 · Answer 3 · answered Dec 15 '12 at 03:42

0

your id names conflict with the jquery selector syntax.

When defining an id for an element do not use the # . or any spaces within your ID

answered Dec 15 '12 at 03:42

Darwayne

1,400
14
14

score 0 · Answer 4 · answered Dec 15 '12 at 03:43

YOu have a problem in your naming convention. replace the . in the name to a hyphen.

So:

<input type="text" size="50" value="" id="s.street">

Becomes

<input type="text" size="50" value="" id="s-street">

and you select in with jquery like so:

$("#s-street");

score 0 · Answer 5 · answered Dec 15 '12 at 03:50

0

Sizzle (the javascript selector library that jQuery implements) will see the s.street as an element s or b with a class of street. as opposed to an element with id of s.street.

answered Dec 15 '12 at 03:50

qooplmao

17,622
2
44
69

score -2 · Accepted Answer · edited May 23 '17 at 12:16

-2

from here: What are valid values for the id attribute in HTML? it looks like jquery has trouble with ids that have periods and colons. so try removing those and see if it works.

edited May 23 '17 at 12:16

Community

1
1

answered Dec 15 '12 at 03:42

kennypu

5,950
2
22
28

1

The reference correctly says the ID is valid with the `.`, so while not a good idea, it is not the actual problem. – Dec 15 '12 at 04:01
"As noted in other responses, jQuery has problems with ids that contain periods and colons." is from the reference. – kennypu Dec 15 '12 at 04:11

jQuery not finding element using id

6 Answers6