CODEWITHSUNDEEP
javascriptjqueryjquery-events
Connor Bishop
Connor Bishop

Reputation: 971

How to dynamically listen for changes in field

I have several similar fields in my form:

<select class="form-control" name="Ops[1][WorkCentre]">..</select>
<select class="form-control" name="Ops[2][WorkCentre]">..</select>
...
<select class="form-control" name="Ops[n][WorkCentre]">..</select>

I don't know how many such fields there will be, as the user adds the fields dynamically.

I need some way of executing a java script function when any of these inputs changes, and inside that function I need to be able to access the key of the input which has changed with regards to the 'Ops' array.

Im happy to use jquery. I was thinking something like

$('select[name=Ops[i][WorkCentre]').change(function(i){
    // A function using i
});

Or maybe a Javascript event listener?

Any help is appreciated.

Upvotes: 0

Views: 357

Answers (1)

kapantzak
kapantzak

Reputation: 11750

You can use event delegation:

// Listen for 'change' event on every element that has class 'form-control'
$(document).on('change', 'select.form-control', function() {
   var name = $(this).attr('name');
   // You code here ...
});

UPDATE

In order to extract the number from name attribute, you can set the name as follows:

name="Ops_[1]_[WorkCentre]"

and then split by '_':

var number = $(this).attr('name').split('_')[1];

UPADATE #2

A better solution would be to set the number in a separate attribute like this:

<select class="form-control" name="Ops[1][WorkCentre]" data-number="1">..</select>

and then retrieve it like this:

var number = $(this).attr('data-number');

Upvotes: 2

Related Questions