jQuery css selector match form array names

Question

html

<input name="single">

<input name="multi[]">
<input name="multi[]">

<input name="multi_keys[my]">
<input name="multi_keys[key]">

jQuery

var match_single      = $('[name="single"]');
var match_multi       = $('[name="multi"]'); // No match
var match_multi_keys  = $('[name="multi_keys"]'); // No match

console.log(match_single.length);
console.log(match_multi.length);
console.log(match_multi_keys.length);

It will only match match_single because the other selectors are not correct.

How can I make them match the form field arrays as well?

I could do this:

var match_multi       = $('[name="multi[]"]');

but how can I match when there are keys inside and they are unknown? I would like to write it like this:

$('[name="multi_keys*');

@dfsq I'm working with a form where I don't have much control over the html output. I need to figure out some way with jQuery and the dom. — Jens Törnell
– Jens Törnell, Commented Apr 12, 2017 at 13:06

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

You can use ^= which matches what an attribute starts with:

$('[name^="multi"]')

Note that this will match both name="multi[]" and name="multi_keys[]". If you wish to select multi[] and multi_keys[] separately, you can simply add the opening square bracket to that selector:

$('[name^="multi["]')

...and:

$('[name^="multi_keys["]')

[att^=val]

Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

– W3C's Selectors specification

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 12, 2017 at 13:05

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jens Törnell Over a year ago

That's really brilliant! I'm really glad that you thought of that pitfall and a fix for it as well.

prasanth · Accepted Answer · 2017-04-12 13:05:36Z

0

use the * before the = like this $('[name*="multi"]');

var match_single = $('[name="single"]');
var match_multi = $('[name*="multi"]'); // No match
var match_multi_keys = $('[name*="multi_keys"]'); // No match

console.log(match_single.length);
console.log(match_multi.length);
console.log(match_multi_keys.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="single">

<input name="multi[]">
<input name="multi[]">

<input name="multi_keys[my]">
<input name="multi_keys[key]">

answered Apr 12, 2017 at 13:05

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Comments

erosb · Accepted Answer · 2017-04-12 13:07:01Z

0

You can query these inputs by matching the prefix of the input names, like $('[name^=multi_keys]') so it will pick up elements which' name starts with multi_keys . But it is quite hacky.

answered Apr 12, 2017 at 13:07

erosb

3,17118 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery css selector match form array names

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related