How might I do JavaScript math on a varying number of input fields?

Question

I'm building a WordPress plugin that handles, among other things, invoices. The idea is that when I create a new invoice, the plugin will automatically generate one line with default values for each product currently available (stored elsewhere, and not always the same). The problem is that I want to be able to just enter quantities and let the plugin do all the math for me totaling up each line, then a subtotal, then a total for the whole invoice. But my invoice lines are generated dynamically, so I don't necessarily know how many I'm going to have. Here's what I mean:

The products are given to me by WordPress, and then I output a line on the invoice for each one that exists, while appending a number to the end of the input box names so that I'll be able to tell which is which when I save the information later.

//Define the contents of the invoice lines box
function wpdsd_invoice_lines_mb_contents(){

//Get an array off all available products, sorted by item position as set by user
$arguments = array( 'post_type'     => 'wpdsd_product',
                    'numberposts'   => '-1',
                    'order'         => 'ASC',
                    'orderby'       => 'meta_value',
                    'meta_key'      => 'wpdsd_item_position',
                );
$products = get_posts($arguments);

//Output an invoice line for each available product
$linenumber = 0;
foreach($products as $product){
    ?>
    
    
    
    $
    $0.00



Here's the HTML I get as a result:

    
    
    
    $
    $0.00


    
    
    
    $
    $0.00


    
    
    
    $
    $0.00


    


For each line on the invoice, I want the total to appear when I input the quantity. In other words,

wpdsd_total_0 = wpdsd_qty_0 * wpdsd_price_0


I also want to calculate the total of all lines, apply taxes, and calculate a grand total.

I've found other answers that show ways to tell JavaScript or jQuery to do the math, but you have to know the names of your input boxes and the element in which you're displaying the result. How might I tell JavaScript to do the math for each line, however many there happen to be?

Edit: I added some common classes, as suggested. But I'm still not sure what I would do next...

Jimenemex · Accepted Answer

This can be done using the onInput event. Simply add the callback method in the html like this: onInput="onInputChangeHandler(this)" where this is the current element the method is fired on. Read more about onInput here.

Notice how it's only added for the quantity and value fields. Every time either of these fields change, the method will fire.

Also notice that I have grouped each row into it's own

. This is so I can just call the parentNode for the current item changed and have all the other elements ready to use. You would have to change the PHP to something like this, (also changed

to

).

foreach($products as $product){
    ?>
    
    
    
    
    $
    $0.00





function onInputChangeHandler(obj) {
  var parentObj = obj.parentNode; // Gets the 
  var children = parentObj.children; // Gets all the inputs
  
  var quantity = children[2].value; // Get the quantity
  var value = children[3].value; // Get the value
  
  children[4].innerHTML = Math.round((quantity * value)*100)/100; // Calculate the total for the total child: Math.round() * 100/100 will round to second decimal place
}

  
  
   $
   $
  0.00



  
  
   $
   $
  0.00



  
  
   $
   $
  0.00







Take a note that this is much easier using a framework that will take care of data binding automagically, but you would have to start using it from the gecko. Consider taking a look at AngularJS or the newer Angular.

How might I do JavaScript math on a varying number of input fields?

Answers (1)

Related Questions