Adding a jquery function to form inputs that have a dot in their ID

Question

I am using a datepick() function to add a calendar to date inputs. This works fine UNLESS the id of the input is named with a dot. I need the dot since this is a very dynamic form and I will never know the number of sessionStartDate(s) in the form.

What am I missing?

function addDatePick(){
$('#evntSes1.sessionStartDate').datepick();
$('#evntSes2.sessionStartDate').datepick();  
}
<select id="evntSes1.sessionTypeID" name="evntSes1.sessionTypeID">
<select id="evntSes2.sessionTypeID" name="evntSes2.sessionTypeID">

Thanks for any suggestions

**Possible duplicate** at http://stackoverflow.com/questions/350292/how-do-i-get-jquery-to-select-elements-with-a-period-in-their-id and documentation here http://api.jquery.com/category/selectors/ **The answer is** to escape the dot like this `$('#evntSes1\\.sessionStartDate').datepick();` — David Ruttka, Aug 16 '11 at 17:38
why don't you just add a class (date) to the select items and use $('select.date').datepick(); ? — John Kalberer, Aug 16 '11 at 17:39
@druttka - yup it was a duplicate thanks for pointing that out and I did find that link very helpful — Lance, Aug 16 '11 at 17:45

score 2 · Accepted Answer · answered Aug 16 '11 at 17:39

2

use two backslashes before dot:

function addDatePick(){
$('#evntSes1\\.sessionStartDate').datepick();
$('#evntSes2\\.sessionStartDate').datepick();  
}
<select id="evntSes1.sessionTypeID" name="evntSes1.sessionTypeID">
<select id="evntSes2.sessionTypeID" name="evntSes2.sessionTypeID">

answered Aug 16 '11 at 17:39

longchiwen

822
6
11

1

first backslash is escape character for special characters in jquery selector expression, the other backslash is because backslash is also escape char for javascript string :) – longchiwen Aug 16 '11 at 17:41

score 0 · Answer 2 · answered Aug 16 '11 at 17:39

because the dot syntax is used for classes. With your syntax, it will look for a div with the id "eventSes1" that has a class "sessionStartDate".

What you could do is in your form generator/html, use sessionsStartDate as a class, instead of appending it to the id with the dot. If you're being lazy and don't want to change your "counting" algo for your form, then just change the dot to a - or something

score 0 · Answer 3 · answered Aug 16 '11 at 17:52

The . is a special character to jQuery for selecting classes. In your case it is looking for an element with id evntSes1 and the class sessionStartDate.

To get jQuery to recognize the . as part of the id, you need to escape it with a single backslash just in front of the dot. See official documentation on selectors for further information.

For completions sake there are other characters, too, that need escaping. These are !"#$%&'()*+,./:;<=>?@[]^`{|}~.

To make your case serve as an example, you'd escape like so:

$('#evntSes1\\.sessionStartDate')

Note that you need to type 2 backslashes as one is needed to escape the backslash within the JavaScript string. jQuery will receive a selector that looks like #evntSes1\.sessionStartDate from the example.

Adding a jquery function to form inputs that have a dot in their ID

3 Answers3