jQuery selector for inputs with square brackets in the name attribute

Question

I'm trying to select this element which has square brackets in the name attribute:

<input type="text" name="inputName[]" value="someValue">

I've tried this (which doesn't work):

$('input[inputName[]=someValue]')

and neither does this:

$('input[inputName[]=someValue]')

or this:

$('input["inputName[]"=someValue]')

EDIT: As some of you have pointed out, $('input[inputName=someValue]') would never work. What I was trying to do was: $('input[name=inputName][value=someValue]'). (But with [] in the name attribute).

Keratoid

Answer 1

Per the jQuery documentation, try this:

$('input[inputName\\[\\]=someValue]')

[EDIT] However, I'm not sure that's the right syntax for your selector. You probably want:

$('input[name="inputName[]"][value="someValue"]')

Leff

Good catch. The reason for needing two backslashes is because a single backslash is interpreted as a JavaScript string escape character, so you need two to specify a literal backslash, which provides the escape character to the selector... ah, the joys of multiple levels of character escaping. – Exuberance

Thank you for that. It is just a matter of using regular expressions. This is very useful when submitting form data directly to an array or list within your favorite view framework. That also helped me answering the question about deleting objects with multiple primary key elements. ;) – Foxtail

Answer 2

You can use backslash to quote "funny" characters in your jQuery selectors:

$('#input\\[23\\]')

For attribute values, you can use quotes:

$('input[name="weirdName[23]"]')

Now, I'm a little confused by your example; what exactly does your HTML look like? Where does the string "inputName" show up, in particular?

edit fixed bogosity; thanks @Dancrumb

Sulphate

I am not able to select (coincidentally a select tag) <select name="foo[bar]"> using $('select[name=foo\\[bar\\]]') however I am able to do so using $('select[name="foo[bar]"]), you second suggestion. – Bailiwick

This answer should be at the top. Its easiest. Switched quotes and it worked for me. Thanks – Wavy

Answer 3

The attribute selector syntax is [name=value] where name is the attribute name and value is the attribute value.

So if you want to select all input elements with the attribute name having the value inputName[]:

$('input[name="inputName[]"]')

And if you want to check for two attributes (here: name and value):

$('input[name="inputName[]"][value=someValue]')

Cortese

Answer 4

If the selector is contained within a variable, the code below may be helpful:

selector_name = $this.attr('name');
//selector_name = users[0][first:name]

escaped_selector_name = selector_name.replace(/(:|\.|\[|\])/g,'\\$1');
//escaped_selector_name = users\\[0\\]\\[first\\:name\\]

In this case we prefix all special characters with double backslash.

Angwantibo

selector.replace(/([|])/g,'\\\\$1'); worked a little better for me because it adds the escaped slashes and produces two, not one escape slash... – Decemvir

@Decemvir just remember that you also need to escape some other characters including colons, periods as well – Angwantibo

Answer 5

Just separate it with different quotes:

<input name="myName[1][data]" value="myValue">

JQuery:

var value = $('input[name="myName[1][data]"]').val();

Vintage