如何将输入和 php 数组中的值放入 js 并相乘？

Question

好的，正如您在下面的代码片段中看到的那样，我在数字 (1) 中创建选项（输入），在数字 (2) 中显示选项名称，在数字 (3) 中显示单价。

(1) 是从 1 到 n 的数字，我想从每个 (1) 中取出输入数字并将其乘以单价 (3)（例如 x=(1)*(3)），然后将所有的相加这些结果并将它们显示在另一个文本框中。 我已经尝试了几件事，但我无法实现。

我真的可以在这里使用一些指导。

我很乐意提供更多信息。

    <?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++;  }  ?>

例如从上面的循环我们得到

我想在这个例子中乘以 5 * 68、0 * 74 等，然后对结果求和并将其显示在总和框中。

@Jerson 很接近，但我真的搞砸了，这是对他的代码的一些编辑，但仍然无法弄清楚。

<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">

和 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

这对我来说很好用

        <?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

        }); 

        ?>

你只需要 javascript 就可以做到吗

Answer 2

所以我确实弄清楚@Jerson帮了很多忙。

所以对于一开始的代码，我们在我们需要的所有项目中添加唯一的 id。 在这个例子中价格和输入所以这里是例子

<?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; ?>">  

然后我们只需要按类获取一个元素并计算其长度的 JS，然后正如您所见，它可以用于无限输入。

 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 ++;
          }
     }

这是jsfiddle中的工作示例