Dropdown chaining and math; two problems

Hello. I am experiencing some strange behavior. I have a table row with a chained dropdown, and have some math happening as the user fills out the row form. Two issues I can’t get past, as my js/jquery knowledge is limited, I’ve done the best I can and looking for some expert advice. I’ve created a fiddle here: https://jsfiddle.net/43sj8hfb/

  1. these rows are created dynamically, but the dropdown chaining only works on the first row. FYI, wherever there is “newshape_6” in the TR id, the 6 is a unique ID.

  2. This is the weird one that boggles me. Column “#'s” should calculate the weight of hidden input shapeweight. However, the math lags behind by 1 selection when changing the select shapesize. Run through the inputs from left to right, when you get to making a selection for “size”, the #'s input will read 0… change the “size” again, and then it will do the formula, but with using the previous selection. I truly don’t get what is happening here. Most of the math is also dead after the first row.

If the row creation doesn’t restate the chaining command, this will be true; $("#shapesize") targets exactly 1 thing - the thing with the ID shapesize.
Multiple things cannot share an ID. ID’s are unique. If you want to target multiple rows of the same thing, make this a class, rather than an ID.

That’s because your math operates only on the first row. For example:

	//values we are writing to
	var totlbs = mainRow.querySelectorAll('[name=totlbs]')[0];

[0] means ‘the first’. Your code continually is looking for values in the first (0th) row, and doing the calculator on that row.

The function is only triggered when making input on the following columns: shapesize, qty, length, nestedqty, stockft, and cwt.

Thank you for having a look.

So are you saying for the chaining that I have to include the jquery script for every row that is created, with a unique ID name to match? Because I tested changing the script to match a class name and it still does not work for more than one, or produces other strange results like the second row affecting the first row on change.

For the second item I should clarify, the math calculations you quoted are working fine for all rows, just the section here is not working, and producing odd behaviour.

jQuery(document).ready(function($){ $('#shapesize').change(function(){ $('#shapeweight').val($(this).find(':selected').attr('data-weight')); }); });

Appreciate the assistance, and I apologize that I am not experienced enough to maybe understand your advice.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.