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
                                    }

                                    }

you mean you want to multiply each value by loop count by the sum of loop count? — Jerson
– Jerson, Commented Oct 14, 2020 at 5:32
This php loop could create 5 different rows with the three values, what I want to do is multiply as mentioned above and then sum each. But I can't get it to work. — JohnnyD
– JohnnyD, Commented Oct 14, 2020 at 5:34

Jerson · Accepted Answer · 2020-10-14 07:36:22Z

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

answered Oct 14, 2020 at 7:36

Jerson

1,7752 gold badges12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JohnnyD Over a year ago

this could work but in the example above it sums 68,74,71,83 (296) and then multiplies the sum of 5,0,4,3=12 so it displays 3552 which would be incorrect, the correct number would be 68*5=340 | 74*0=0 | 71*4=284 | 83* 3=249 and should display 873

JohnnyD Over a year ago

I edited a bit the js I added 'some_test +=(price_val*input_val); ' after the if and I changed the last document.getElementById('sum').value = !Number.isNaN(some_test) ? some_test : 0 but now I face the following problem, lets say that we do have four rows as in the example, if I add quantity to the first box everything is fine, if I add to the second box things get a bit messy in the example above if i have 0,0,0,1 the sum that appears is 1055

JohnnyD · Accepted Answer · 2020-10-15 06:32:17Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related