jquery reference ID with space in name

Question

I am using jquery with a jquery multi select extension.

For my html syntax:

<select multiple="multiple"  id="test">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>

I then get the values of the multi-select with:

  $(function() {

        $('#test').change(function() {
            console.log($(this).val());
        }).multipleSelect({
            width: '100%'
        });
    });

This works 100%.

my question is how do I get this to work when the ID has a space in it. I know it isnt ideal to have a space in an ID or Name but it is what it is currently and I need to get the multiple select options from the ID with a space. so example:

<select multiple="multiple"  id="test two">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    </select>

$(function() {

            $('#test two').change(function() {
                console.log($(this).val());
            }).multipleSelect({
                width: '100%'
            });
        });

this fails with the space in it.

I have tried a few options like below without any success.

any advice appreciated a always.

$(function() {

$("#test two").change(function() {
                    console.log($(this).val());
                }).multipleSelect({
                    width: '100%'
                });
            });

You're not supposed to have spaces in the ID. Replace them with hyphens or underscores. — Reinstate Monica Cellio, Apr 16 '15 at 15:12
Thanks, I know it is not correct but still looking for a solution if you have any advice will be appreciated. — Smudger, Apr 16 '15 at 15:13
possible duplicate of [jquery IDs with spaces](http://stackoverflow.com/questions/596314/jquery-ids-with-spaces) — Reeno, Apr 16 '15 at 15:13
Even if you can make a valid selector, you can't guarantee the behaviour in all browsers. Fix the problem - remove the space. — Reinstate Monica Cellio, Apr 16 '15 at 15:14
if the OP doesn't care about old browser he can continue to use spaces in the IDs, HTML5 accepts this kind of characters into the attributes. — rvandoni, Apr 16 '15 at 15:15
@rikpg No, it doesn't. It allows pretty much everything **but** spaces: "The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. **The value must not contain any space characters.**" [Source](http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute) — Anthony Grist, Apr 16 '15 at 15:23

score 5 · Answer 1 · answered Apr 16 '15 at 15:12

Like so

$("select[id='test two']").change(function() {
    console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple"  id="test two">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
</select>

It's possible (use space in ID) but better don't use id with space, add _ to your selector, like '#text_two'

rvandoni · Answer 2 · 2015-04-16T15:24:21.933

3

Space is not a valid character in the ID attribute in HTML4 and in HTML5 too. By the way you can use an attribute selector:

$("[id='test two']").change( ... );

edited Apr 16 '15 at 15:24

answered Apr 16 '15 at 15:12

rvandoni

3,297
4
32
46

Thanks, I did try this but it causes a break in the jquery. `Error: Syntax error, unrecognized expression: label[for=test two]` – Smudger Apr 16 '15 at 15:15
maybe you have an errore somewhere else, as you can see in this fiddle: https://jsfiddle.net/LLmjra42/ this kind of selector works smoothly! – rvandoni Apr 16 '15 at 15:18
Yeah I think it might be that the jquery multi select doesnt like this, jquery itself is fine with it... I have referenced ID's with spaces successfully with your method in the passed. – Smudger Apr 16 '15 at 15:20

score 2 · Answer 3 · answered Apr 16 '15 at 15:17

2

You can use an attribute selector like so:

$("[id='test two']").change(function{
    // Logic here...
});

Alternatively, you could change the id to a class...

answered Apr 16 '15 at 15:17

Tomuke

869
2
8
26

score 2 · Answer 4 · answered Apr 16 '15 at 15:21

Don't use spaces when you select element by id attribute,because space character is not a valid for ID attribute.why not follow convention?.

ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

if you don't care any kind of convention then select like the way other answer suggests.

$("select[id='test two']").change(function() {
    console.log($(this).val());
});

@courtesy Alexander

score 1 · Accepted Answer · answered Apr 16 '15 at 15:17

The jQuery documentation has a comprehensive page on Selectors. You'll find all of the selectors that you can use to query based on attributes (which the id is), but it also has this piece of advice:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

So you have two options:

$('#test\\ two')

or

$('[id="test two"]')

All of that said, the HTML spec doesn't allow spaces in the id attribute on elements. The browser will probably still render the page as you'd expect, but you really shouldn't do it if you can avoid it; if only because it makes things much more complicated than they need to be, as you've found out.

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

jquery reference ID with space in name

5 Answers5