0

I've been trying to figure out what's wrong with my code for a while now, and why it won't let me get the value of my input field.

My code looks like this:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text id="0.1.2_00_1" value=0>
<script>
  console.log($('#0.1.2_00_1').val())
</script>

Why doesn't this work? Hopefully I'm not just being really dumb.

j08691
  • 190,436
  • 28
  • 232
  • 252
Henry C
  • 21
  • 3
  • 2
    Possible duplicate of [How do I get jQuery to select elements with a . (period) in their ID?](https://stackoverflow.com/questions/350292/how-do-i-get-jquery-to-select-elements-with-a-period-in-their-id) – wha7ever Aug 07 '17 at 20:31
  • 1
    Using the old `getElementById` is one of the options: `document.getElementById('0.1.2_00_1').value` – undefined Aug 07 '17 at 20:32

3 Answers3

4

If an ID carries a period (special character) in jquery you must escape it like so with double slashes:

console.log($('#0\\.1\\.2_00_1').val());
Travis Acton
  • 3,846
  • 2
  • 16
  • 24
3

You need to escape the periods. For example $('#0\\.1\\.2_00_1')

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text id="0.1.2_00_1" value=0>
<script>
  console.log($('#0\\.1\\.2_00_1').val())
</script>

As the jQuery docs on selectors state:

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

j08691
  • 190,436
  • 28
  • 232
  • 252
1

The id contains the . character which, when passed to a JQuery selector, is interpreted as a CSS class qualifier.

It's causing JQuery to look for an element who's id is 0 that uses a CSS class of 1 and another called 2_00_1.

The official spec. says:

"Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility."

It's better to avoid them, if possible and use just alpha-numeric values for ids.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text  id="x" value=0>
<script>console.log($('#x').val())</script>
Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
  • @Stephen You misunderstand. When `.` is used as part of a JQuery selector, it is interpreted as a CSS class identifier. The `#` is perfectly fine. See my running example. – Scott Marcus Aug 07 '17 at 20:30
  • 2
    the id is valid, https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Joe Lissner Aug 07 '17 at 20:30
  • @JoeLissner The official [spec.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) says: *"Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility."* – Scott Marcus Aug 07 '17 at 20:33