Javascript multiplication array input

Question

How to multiplication array input and display result. If input order, the price will multiplication with order and display subtotal. The problem is I have more than one subtotal

<table>
<tr>
    <td>Price</td>
    <td>Order</td>
    <td>Subtotal</td>
</tr>
<tr>
    <td><input type="text" id="price1" name="price" readonly="" value="15000"></td>
    <td><input type="text" id="order1" name="order" value="0" oninput="subt()"></td>
    <td><input type="text" name="subtotal" value="0" readonly></td>
</tr>
<tr>
    <td><input type="text" id="price2" name="price" readonly="" value="10000"></td>
    <td><input type="text" id="order2" name="order" value="0" oninput="subt()"></td>
    <td><input type="text" name="subtotal" value="0" readonly></td>
</tr>
<tr>
    <td><input type="text" id="price3" name="price" readonly="" value="5000"></td>
    <td><input type="text" id="order3" name="order" value="0" oninput="subt()"></td>
    <td><input type="text" name="subtotal" value="0" readonly></td>
</tr>

Javascript

function subt(){

var price = document.getElementsByName('price'),
    order = document.getElementsByName('order'),
    subtotal = document.getElementsByName('subtotal');

var sub=0;

for(var i=0;i<price.length;i++){
    sub += price[i] * order[i];
    document.getElementByName('subtotal').value = sub; 
    }

}

I want to find subtotal for every input, where subtotal is price * order. I have code to find subtotal for one result, but now I have 3 input and 3 subtotal — ahmadbagwi
– ahmadbagwi, Commented Oct 26, 2017 at 3:49

brk · Accepted Answer · 2017-10-26 03:50:41Z

In the subt function pass the current input field by passing this which refers to the current element in context. Along with that pass the value of the price and the name of the input element where you want to display the subtotal.

Also getElementsByName is a collection. In order to get the field , you need to pass the index. Here [0] mean element in first index

function subt(elem, val, dispField) {
  document.getElementsByName(dispField)[0].value = elem.value * val
}

<table>
  <tr>
    <td>Price</td>
    <td>Order</td>
    <td>Subtotal</td>
  </tr>
  <tr>
    <td><input type="text" id="price1" name="price" readonly="" value="15000"></td>
    <td><input type="text" id="order1" name="order" value="0" oninput="subt(this,15000,'subtotal1')"></td>
    <td><input type="text" name="subtotal1" value="0" readonly></td>
  </tr>
  <tr>
    <td><input type="text" id="price2" name="price" readonly="" value="10000"></td>
    <td><input type="text" id="order2" name="order" value="0" oninput="subt(this,10000,'subtotal2')"></td>
    <td><input type="text" name="subtotal2" value="0" readonly></td>
  </tr>
  <tr>
    <td><input type="text" id="price3" name="price" readonly="" value="5000"></td>
    <td><input type="text" id="order3" name="order" value="0" oninput="subt(this,5000,'subtotal3')"></td>
    <td><input type="text" name="subtotal3" value="0" readonly></td>
  </tr>
</table>

Anson W Han · Accepted Answer · 2017-10-26 03:56:26Z

I recommend adding an ID to each subtotal and refactoring your code as follows- either:

Looping through rows and targeting inputs by ID, eliminating array variables.
- Detect the number of table rows
- set your for loop to iterate through each row
- in the loop, set each element ID by concatenation the string with the integer from the loop counter
- get element by ID instead of name to parse input parameters
- perform calculation
- get subtotal element by ID and set value
If table will always have fixed number of columns, iterate similar to above but target inputs by the column position, using nth child identifiers. This can eliminate any id or class targeting.

Worth noting, for valid html, you should add id's and names to each input field, and it's recommended to include labels for accessibility

Collectives™ on Stack Overflow

Javascript multiplication array input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related