JQuery activeElement on multidimensional input names

Question

If I have form input fields like the code below, can I figure what "index" is in focus?

<input type="text" name="myField['item_name'][]"> // index 0
<input type="text" name="myField['item_qty'][]"> // index 0

<input type="text" name="myField['item_name'][]"> // index 1
<input type="text" name="myField['item_qty'][]"> // index 1

<input type="text" name="myField['item_name'][]"> // index 2
<input type="text" name="myField['item_qty'][]"> // index 2

If the first item is filled and the user selects another item input, how could I figure which "index" is selected?

Possible duplicate of http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus — Sablefoste, Mar 03 '16 at 04:58
I have an Ajax list that pops down from the input with matches to the typed content as the user types in the input box. Once a selection is clicked from the list, the ajax list loads pulled data into specified input values. Since I am working with multidimensional input names, I need to specify which input fields to populate. On my form, there are 4 other fields on the same "index" that need to be populated from the ajax loaded content. — EagleTalonTim, Mar 03 '16 at 05:05

Rayon · Answer 1 · 2016-03-04T03:58:17.067

Use .index() to search for a given element from among the matched elements

Try this:

$('[name="myField[\'item_name\'][]"]').on('focus', function() {
  alert($('[name="myField[\'item_name\'][]"]').index(this))
});

$('[name="myField[\'item_qty\'][]"]').on('focus', function() {
  alert($('[name="myField[\'item_qty\'][]"]').index(this))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" name="myField['item_name'][]">// index 0
<input type="text" name="myField['item_qty'][]">// index 0

<input type="text" name="myField['item_name'][]">// index 1
<input type="text" name="myField['item_qty'][]">// index 1

<input type="text" name="myField['item_name'][]">// index 2
<input type="text" name="myField['item_qty'][]">// index 2

Fiddle here

To bind events on dynamically added elements, Use Event delegation

Try this:

$(document).on('focus', '[name="myField[\'item_name\'][]"]', function() {
  alert($('[name="myField[\'item_name\'][]"]').index(this))
});

$(document).on('focus', '[name="myField[\'item_qty\'][]"]', function() {
  alert($('[name="myField[\'item_qty\'][]"]').index(this))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" name="myField['item_name'][]">// index 0
<input type="text" name="myField['item_qty'][]">// index 0

<input type="text" name="myField['item_name'][]">// index 1
<input type="text" name="myField['item_qty'][]">// index 1

<input type="text" name="myField['item_name'][]">// index 2
<input type="text" name="myField['item_qty'][]">// index 2

Updated Fiddle

This mostly worked except for dynamically added content. I ended up using the same code just in an onFocus= function called from the form's input HTML. — EagleTalonTim, Mar 04 '16 at 02:21

score 0 · Answer 2 · answered Mar 03 '16 at 05:01

0

Try using index on foucs

$("input[type='text'][name^='myField']").focus(function(){
  console.log($(this).index())
})

answered Mar 03 '16 at 05:01

Muhammad Atif

1,050
1
9
21

JQuery activeElement on multidimensional input names

2 Answers2