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.

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.

• javascript
• jquery
• html

• 1 $('#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 Commented Dec 15, 2012 at 3:46

6 Answers 6

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

$('#b\\.street')​

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 ....

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

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">

Bees

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

and you select in with jquery like so:

$("#s-street");

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.

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.