how to take the values from an input and a php array into a js and multiply?

Question

Ok so as you can see in the code snip bellow I am creating choices (inputs) in number (1) in number (2) I display the choice's name and in number (3) I display the unit price.

(1) is a number from 1 to n, I want to take the input number from each (1) and multiply it with the unit price (3) (example x=(1)*(3)) and then sum all of these results and display them in another textbox. I have tried several things but I couldn't make it happen.

I could really use some guidance here.

Any more information I will be happy to provide.

    <?php
        $sum = $choice['qty'] * $choice['timi'];
        foreach($choice3 as $choice3){
    ?>
    //(1)
<input type="number" class="colorqty" name="color[<?php echo $i; ?>][unit]" step="<?php echo $step; ?>" value="0" min="0" class="color_qty_1" onchange="updateTotal();">
 //(2)
    <input type="text" value="<?php echo $choice3['price_name']; ?>" name="color[<?php echo $i; ?>][price_name]" readonly="readonly" class="color_qty_2">
 //(3)
    <input type="text" value="<?php echo $choice3['price']."€"; ?>" name="xrwmas" readonly="readonly" class="color_qty_2" id="tests">  <br />
    <?php $i++;  }  ?>

for example from the loop above we get

I want to multiply in this example 5 * 68, 0 * 74, etc and then sum the results and display it in the sum box.

@Jerson is close but I it gets really messed up this is a bit of an edit on his code but still can't figure it out.

<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
 <input type="text" value="58" readonly="readonly" class="color_qty_3" id="price">
 <br>
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
 <input type="text" value="33" readonly="readonly" class="color_qty_3" id="price">
<br> 
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
 <input type="text" value="54" readonly="readonly" class="color_qty_3" id="price">
<br> 
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
 <input type="text" value="55" readonly="readonly" class="color_qty_3" id="price">
<br>
<br><br>


<label for="sinolo" class="color_qty_2" style="margin-left:45px"> Σύνολο €</label>
                                     <input type="number" class="color_qty_2" style="background-color:white;color:black;width: 90px; border-color:black;border-radius:5px; border-width:1px; text-align:center;" value="<?php echo number_format((float)$sum, 2, '.', ''); ?>" id="a3" readonly="readonly">

and the js

 function updateSum(value,id) {
                                  var elements = document.getElementsByTagName('input')
                                    var input_val = 0;
                                    var price_val = 0;
                                    var some_test = 0;
                                    var test1 = 0;
                                    for(let i = 0 ; i < elements.length; i++) { 
                                        if(elements[i].getAttribute('id') == 'price') {
                                            
                                            price_val = parseInt(elements[i].value)
                                        }
                                        if(elements[i].getAttribute('id') == 'input_value') { 
                                            
                                            input_val = parseInt(elements[i].value)           
                                        }
                                        test1 = price_val*input_val;
                                        
                                        some_test += test1;
                                        document.getElementById('a3').value = some_test
                                    }

                                    }

Answer 1

So I did figure it out @Jerson helped out a lot.

So for the code in the beginning we add unique id in all items we need. In this example price and input so here is the example

<?php
        foreach($choice3 as $choice3){
    ?>
    //(1)
<input type="number" class="colorqty" name="color[<?php echo $i; ?>][unit]" step="<?php echo $step; ?>" value="0" min="0" class="color_qty_1" onchange="updateSum();" id="input_value_<?php echo $i; ?>">
 //(2)
    <input type="text" value="<?php echo $choice3['price_name']; ?>" name="color[<?php echo $i; ?>][price_name]" readonly="readonly" class="color_qty_2">
 //(3)
    <input type="text" value="<?php echo $choice3['price']."€"; ?>" name="xrwmas" readonly="readonly" class="color_qty_2" id="price_<?php echo $i; ?>">  

Then we just need the JS that takes one element by class and counts its length and then well you as you can see makes it work for infinite inputs.

 function updateSum(value,id) {
 
    var elements = document.getElementsByClassName('colorqty').length;
    var input_val = 0;
    var price_val = 0;
    var multipl = 0;
    var output = 0;
    var i = 0;
    while(i < elements ) {
                        
        price_val = document.getElementById('price_'+[i]).value;
        input_val = document.getElementById('input_value_'+[i]).value;
        if(input_val != null){ 
        multipl = price_val*input_val;
        output += multipl ;
                        
        document.getElementById('a3').value = !Number.isNaN(output) ? output : 0
            }
          i ++;
          }
     }

and here is the working example in jsfiddle

Answer 2

This works fine for me

        <?php Route::add('/route', function() { 

        $array = [
            [
            'price_name' => 'Xiaomi Poco X3',
            'price' => 2000
            ],
            [
            'price_name' => 'Xiaomi Poco F1 plus',
            'price' => 1500
            ],
            [
            'price_name' => 'Xiaomi Poco F1',
            'price' => 1000
            ]
            ];

            foreach($array as $key => $value) {

        ?>


        <div id="form">
            <input type="number" id="input_value" class="colorqty" name="color[<?php echo $key; ?>][unit]" value="0" min="0" class="color_qty_1" onkeyup="updateTotal();">
            <input type="text" value="<?php echo $value['price_name']; ?>" name="color[<?php echo $key; ?>][price_name]" readonly="readonly" class="color_qty_2">
            <input type="text" data-id="<?php echo $key; ?>" value="<?php echo $value['price']."€"; ?>" id="price" name="xrwmas" readonly="readonly" class="color_qty_2" id="tests">  <br />
        </div>


        <?php

        }

        echo '<p>SUM <span id="sum">0</span></p>';
        ?> 

        <script>

        function updateTotal(value,id) {
        var elements = document.getElementsByTagName('input')

        var input_val = 0;
        var price_val = 0;

        for(let i = 0 ; i < elements.length; i++) {
            
            if(elements[i].getAttribute('id') == 'price') {
                
                price_val += parseInt(elements[i].value.replace('€',''))
            }

            if(elements[i].getAttribute('id') == 'input_value') {
            
                input_val += parseInt(elements[i].value)
            
            }
        }

        document.getElementById('sum').innerHTML = !Number.isNaN(price_val * input_val) ? price_val * input_val : 0

        }

        </script>

        <?php

        }); 

        ?>

Will you need only javascript todo that