3

Possible Duplicate:
Find DOM element by ID when ID contains square brackets?

I am unable to get the value of form elements that are somewhat crazy. For example I have a HTML form element that "has" to have the name of "data[User][notify_one_day_out]". The problem is that I am unable to get the value of the form element. 

<label for="data[User][notify_one_day_out]">One day away:</label>
<select name="slider" id="data[User][notify_one_day_out]" data-role="slider">
    <option value="0">OFF</option>
    <option value="1" selected="selected">ON</option>
</select>

However 

alert( $("#data[User][notify_one_day_out]").val());

comes out as undefined. Any help?

Community
  • 1
  • 1
Strong Like Bull
  • 11,155
  • 36
  • 98
  • 169
  • 1
    In the ID, not name.. Read this http://stackoverflow.com/questions/1239095/find-dom-element-by-id-when-id-contains-square-brackets – Cheery Feb 24 '12 at 04:28
  • Brackets aren't valid in id's - http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. Not sure if you will be able to make this work. – mrtsherman Feb 24 '12 at 04:29

5 Answers5

4

escape with \\

$("#data\\[User\\]\\[notify_one_day_out\\]")
Rafay
  • 30,950
  • 5
  • 68
  • 101
2

You have to escape the brackets: jsFiddle

alert( $("#data\\[User\\]\\[notify_one_day_out\\]").val());​

One backslash for the RegExp one for Javascript to escape the backslash ;)

jQuery uses sizzle as a selector engine, which is powered by some very high-tech regular expressions.

Edit for nnnnnn: I'm no expert on the inner working of jQuery, but following the breadcrumbs in the source sure looks like like RegExps to me

1) jQuery calls $.fn.init(selector)

var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    }

2) After all the special cases, init uses quickExpr.exec( selector )

init: function( selector, context, rootjQuery ) {
        ...
    match = quickExpr.exec( selector );

3) quickExpr is where it seems to go into RegExp land, after this I would have no idea what pieces come out on the other side.

quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/
Community
  • 1
  • 1
Sinetheta
  • 9,189
  • 5
  • 31
  • 52
  • You are definitely correct about escaping the brackets, and escaping the backslashes, but the string you pass the jQuery function has nothing to do with regular expressions (even if jQuery/sizzle uses regex for _some_ of its implementation). – nnnnnn Feb 24 '12 at 05:11
  • @nnnnnn I've broken down my thought process in an edit to the post. Am I missing something? If it has "nothing to do with regular expressions" then why the escape slashes? – Sinetheta Feb 24 '12 at 06:12
  • jQuery/sizzle is using a regex to do stuff with the selector you supply, it is not using the selector as a regex. Regex syntax is completely different to CSS/jQuery selector syntax. The escape slashes are needed because square brackets have meaning in the selector syntax (a _different_ meaning to square brackets in regex syntax) so you need to escape brackets when you need actual bracket characters. Note that you can also call the jQuery function with a string of html like `$("
    ")`, which jQuery treats quite differently to `$("div")`...
     – nnnnnn Feb 24 '12 at 06:56
  • Are you sure? You are right that up to that point the selector has not been used in a regexp, but I see plenty of places in the source where things made from the selector are turned into regexps `quickParse = function( selector ) {` ... `new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" )` for example. Not saying I could at all track what's being done in that file, just that there are more than literal RegExp declarations. – Sinetheta Feb 24 '12 at 07:44
  • Yes I'm sure. jQuery's selector syntax is (more or less) the same as CSS selector syntax, which is completely unrelated to regex syntax. jQuery may use a regex to find the parts of your selector that need special treatment, and may plug some of those pieces into other dynamically generated regexes for further processing, but that's pretty much what I said in the first place... – nnnnnn Feb 24 '12 at 11:00
1
$(document.getElementById('data[User][notify_one_day_out]')).val()
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
0

Try ecsaping with \ I do remember something like this

Update

I guess we have already had solution as Cheery commented

find Dom element by I'd containing square brackets

Community
  • 1
  • 1
kingpin
  • 1,498
  • 1
  • 11
  • 12
0

It seems likely that you have only one select named "slider" so that you can work around the invalid id using an Attribute Equals Selector, $('select[name="slider"]').

minopret
  • 4,726
  • 21
  • 34