Eli Eli - 3 months ago 4
Javascript Question

How to store the values of an appended table row in an array variable using onchange event?

I have an ajax function that gets the values from the database and then appends those data to a table. Now, there are instances that there will be 2 or more records from the database that are being retrieved, so 2 or more table rows are also appended.My problem is, how would I able to store those values in an array variable if 2 or more values are appended on the table? Here are the codes. Thank you for the help.

$.post("{{ url('create_po') }}", { 'prod_IDs': valArray }, function(data){
var obj = JSON.parse(data);
for(var i = 0; i < obj.prodval.length; i++){
txt += "<tr class='info '><td><input type='number' class='form-control' style='width:100px;' value='0'/>"+
"</td><td><input type='text' class='form-control' style='width:100px;' value='"+obj.prodval[i].price+"' disabled=disabled />"+
"</td><td><input type='text' class='form-control' style='width:100px;' value='0' disabled=disabled />"+


<table id="tbl-po-list">
<tbody id="po-create"></tbody>

Bind Function to get the values onchange


var arrayVar = [];

$('#tbl-po-list').on( 'change keyup' , 'input[type="number"]' ,function(){




I just dont know how to take a step here. How would I save the values in the array variable "arrayVar" during onchange event? What if there are 2 rows? How would I save it?

Appended rows sample image
enter image description here

enter image description here


Just store it in an object:

var data = {
   qty: $(this).val(),
   price: $(this).parents('.info').find('.price').val(),
   total: $(this).parents('.info').find('.total').val()

Then when you retrieve it (based upon your image):

arrayVar[0].price // 45
arrayVar[1].price // 12