Add event to all elements of a HTML input array and get the values in the array

Question

I have a row with 4 inputs:

<div id="productRow1" class="productRow">
    <input type="text" name="numbers[]">
    <input type="number" name="quantities[]">
    <input type="text" name="levels[]">
    <input type="number" name="prices[]">
</div>

I have an "Add Another Product" button and user can add another row by clicking that button. Generated row will be like this with the unique div id:

<div id="productRow2" class="productRow">
    <input type="text" name="numbers[]">
    <input type="number" name="quantities[]">
    <input type="text" name="levels[]">
    <input type="number" name="prices[]">
</div>

I have a wrapper div for all the rows like this:

<div class="input_fields_wrap">
    <div id="productRow1" class="productRow">...</div>
    <div id="productRow2" class="productRow">...</div>
    ...
</div>

How I add new rows dynamically with the unique div row id when the "Add Another Product" button is clicked:

var wrapper = $(".input_fields_wrap");
$(wrapper).append('<div ' + divId + ' class="productRow"' + '>
                <input type="text" name="numbers[]"/>' +
                '<input type="number" name="quantities[]"/>' +
                '<input type="text" name="levels[]"/>' +
                '<input type="number" name="prices[]"/>');

Also I have another text box which should show the total price instantly. So I need to get the price data of each row after each row's price is entered by user. I tried to add an event to all of my prices[] fields like this:

$(function () {
    $('input[name="prices[]"]').blur(function () {
        alert('testAlert');
    });
});

But it didn't work. I also tried to add an onblur event to my existing and generated input fields to get the prices like this:

<input type="number" name="prices[]" onblur="calculatePrice()">

with the function:

function calculateTotal() {
    alert('testAlert');
    var prices = $('input[name="prices[]"]').map(function () {
        alert(this.value);
        return this.value;
    }).get();
}

I also tried specifying input field like this: 'input[name^="prices"]' and adding the event like this:

$('input[name="prices[]"]').on('blur', function() {
    alert('testAlert');
});

And adding the event by class like this after I added class='priceClass' to my price input fields:

<input type="number" name="prices[]" class="priceClass">
$('.priceClass').on('blur', function() {
    alert('testAlert');
});

None of these triggered the event. So how can I add an event to all elements of a HTML input array and get the all values in the input array after the event is triggered?

If you're using jquery to add the new fields, you should be able to bind the function upon creation of the fields, no? — elPastor
– elPastor, Commented Dec 14, 2016 at 3:25
have a look at jQuery delegatation of events to child selectors, api.jquery.com/on . In effect, attach the .on to a parent element that is not dynamically added, but specify the selector you wish to have trigger the event. ie. $('.container').on('blur','input[name="prices[]"]', function() { alert('testAlert'); }); — haxxxton
– haxxxton, Commented Dec 14, 2016 at 3:27
Where is your code that creates the new row? Post that and I / others can build on that. — elPastor
– elPastor, Commented Dec 14, 2016 at 3:28

StackSlave · Accepted Answer · 2016-12-14 04:26:39Z

1

You probably need something more like:

$(function(){

function getVals(){
  var n = 0;
  $("input[name='prices[]']").each(function(i, e){
    n += +$(e).val();
  });
  return n;
}
$("input[name='prices[]']").change(function(){
  $('#out').html(getVals());
});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
<body>
  <input type='number' name='prices[]' value='10' multiple='multiple' />
  <input type='number' name='prices[]' value='2' multiple='multiple' />
  <input type='number' name='prices[]' value='7' multiple='multiple' />
  <input type='number' name='prices[]' value='1' multiple='multiple' />
  <div id='out'></div>
</body>
</html>

edited Dec 14, 2016 at 4:26

answered Dec 14, 2016 at 3:45

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

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

2 Comments

vontarro Over a year ago

Here you assign the event to a button. I need to assign the event to my fields. Event can be blur, change or something similar.

StackSlave Over a year ago

Hold on, I'll do that.

Collectives™ on Stack Overflow

Add event to all elements of a HTML input array and get the values in the array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related