jQuery: Calculate multidimensional array by keyname

Question

i've confused how to do calculation in javascript while using multidimensional array, i have form like this

 <input type=number name="sell['FRUIT']['YELLOW']"> <input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled> <input type=number name="newstock['FRUIT']['YELLOW']" disabled> <input type=number name="sell['WOOD']['BLACK']"> <input type=number name="stock['WOOD']['BLACK']" value=50 disabled> <input type=number name="newstock['WOOD']['BLACK']" disabled> <input type=number name="sell['VEGETABLE']['RED']"> <input type=number name="stock['VEGETABLE']['RED']" value=25 disabled> <input type=number name="newstock['VEGETABLE']['RED']" disabled> <input type=number name="sell['VEGETABLE']['GREEN']"> <input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled> <input type=number name="newstock['VEGETABLE']['GREEN']" disabled> 

that FRUIT/WOOD/VEGETABLE and COLOR Keys are Dinamicaly generated from PHP, it can be anything, but will have same key and subkey on that sell , stock and newstock array.

What i need to do is calculate and put the value on newstock input box by substracting stock with sell from user input.

Answer 1

You can add a change event handler to the input and update the specific input like this:

• newStockName gets the input's name you want to update using the current input's name

• $(this).next().val() - $(this).val() gets the difference between the stock input and the current sell input being changed

 $("input").change(function() { const newStockName = this.name.replace("sell", "newstock"); const difference = $(this).next().val() - $(this).val(); $(`input[name="${newStockName}"]`).val(difference) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type=number name="sell['FRUIT']['YELLOW']"> <input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled> <input type=number name="newstock['FRUIT']['YELLOW']" disabled> <input type=number name="sell['WOOD']['BLACK']"> <input type=number name="stock['WOOD']['BLACK']" value=50 disabled> <input type=number name="newstock['WOOD']['BLACK']" disabled> <input type=number name="sell['VEGETABLE']['RED']"> <input type=number name="stock['VEGETABLE']['RED']" value=25 disabled> <input type=number name="newstock['VEGETABLE']['RED']" disabled> <input type=number name="sell['VEGETABLE']['GREEN']"> <input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled> <input type=number name="newstock['VEGETABLE']['GREEN']" disabled> 

Answer 2

Either be careful with the quotes or use jQuery.escapeSelector :

 $(function() { $('input[name^="sell"]').on("change", function() { var name2 = this.name.replace(/^sell/, "stock"); var name3 = this.name.replace(/^sell/, "newstock"); var diff = $('input[name="' + $.escapeSelector(name2) + '"]').val() - $(this).val(); $('input[name="' + $.escapeSelector(name3) + '"]').val(diff); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type=number name="sell['FRUIT']['YELLOW']"> <input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled> <input type=number name="newstock['FRUIT']['YELLOW']" disabled> <input type=number name="sell['WOOD']['BLACK']"> <input type=number name="stock['WOOD']['BLACK']" value=50 disabled> <input type=number name="newstock['WOOD']['BLACK']" disabled> <input type=number name="sell['VEGETABLE']['RED']"> <input type=number name="stock['VEGETABLE']['RED']" value=25 disabled> <input type=number name="newstock['VEGETABLE']['RED']" disabled> <input type=number name="sell['VEGETABLE']['GREEN']"> <input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled> <input type=number name="newstock['VEGETABLE']['GREEN']" disabled> 

Answer 3

First, you don't have a "multi-dimension" array, you have a name property with text that matches 3 inputs together, as in:

(sell|stock|newstock)(.*?)

if you could set classes/data against each input, it would be much easier, eg:

<input type=number class='sell' data-key1="FRUIT" data-key2="YELLOW">

without this, you can get the same thing, just by parsing the name= attribute.

Loop through each sell to get the key, get matching stock/newstock inputs and update.

One issue is that your name includes [ , ] and ' which cause issues with the jquery selector, so you need to escape these first.

 //alert($("[name=stock\\\\[\\\\'FRUIT\\\\'\\\\]\\\\[\\\\'YELLOW\\\\'\\\\]]").length) $("#btn").click(function() { var sell = $("[name^=sell]"); sell.each(function() { // Get key and "fix" for jquery selector (alternate regex possible, simple version here) var key = $(this).attr("name").substr(4).replace(/\\[/g, "\\\\[").replace(/\\]/g, "\\\\]").replace(/\\'/g, "\\\\'"); // find matching stock var stock = $("[name=stock" + key + "]").val() * 1; var newstock = stock - $(this).val() * 1; $("[name=newstock" + key + "]").val(newstock); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type=number name="sell['FRUIT']['YELLOW']" value=5> <input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled> <input type=number name="newstock['FRUIT']['YELLOW']" disabled> <hr/> <input type=number name="sell['WOOD']['BLACK']" value=5> <input type=number name="stock['WOOD']['BLACK']" value=50 disabled> <input type=number name="newstock['WOOD']['BLACK']" disabled> <hr/> <input type=number name="sell['VEGETABLE']['RED']" value=5> <input type=number name="stock['VEGETABLE']['RED']" value=25 disabled> <input type=number name="newstock['VEGETABLE']['RED']" disabled> <hr/> <input type=number name="sell['VEGETABLE']['GREEN']" value=5> <input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled> <input type=number name="newstock['VEGETABLE']['GREEN']" disabled> <hr/> <button id='btn'>calc</button>