Question

我到处都有搜索，似乎找不到任何东西，我有一个将数据发送到我的php文件的ajax，然后从数据库中获取数据，并在div中显示

ajax

$(document).ready(function () {

        $("#addForm").on('submit', function (e) {
            // widthMeas and Drop Meas are just the selection of cm/in/m ect

            let Width = document.getElementById('blindWidth').value;
            let widthMeas = document.getElementById('widthMeas').value;

            let height = document.getElementById('height').value;
            let dropMeas = document.getElementById('dropMeas').value;

            let Type = document.getElementById('Type').value

            let quantity = document.getElementById('quantity').value

            $.ajax({
                url:"converter.php",
                method: "post",
                data:{
                    Width: Width,
                    widthMeas: widthMeas,
                    Drop: Drop,
                    dropMeas: dropMeas,
                    Type: Type,
                    quantity: quantity
                },
           success:function (data) {
           console.log(data);
           $('#quote').append(data);
           $('#addBlindForm')[0].reset();
           $('#quoteModal').modal('hide');
           $('#quoteContainer').show();
          }
      });
});

php文件

$output .= "
             <tr>
                <td>".$InputWidth."".$widthMeas." x ".$InputDrop."".$dropMeas." </td>
                <td>".$Type."</td>
                <td>".$quantity."</td>
                <td>£ ".$price."</td>
             </tr><br>
                         ";
            echo $output;
            break;

我想知道在将每个新项目添加到应显示的“ quote div”后，如何实时将所有总数相加

宽度高度类型数量价格 1cm x 1cm木板12 44

总计44.00

Answer 1

<!DOCTYPE html>
<html lang="pt-br">
<meta charset="utf-8" />

<head>
    <title>Vote</title>

</head>

<body>
    <div>
        Width :
        <input type="number" name="" id="blindWidth">
        <br> Height :
        <input type="number" name="" id="height">
        <br> Type :
        <input type="text" name="" id="Type">
        <br> Quantity :
        <input type="number" name="" id="quantity">
        <br>
        <div id="priceTag">Fill in the inputs above</div>
        <div id="dimensions"></div>

    </div>
    <script type="text/javascript">
        function calcPrice(quantityValue) {
            quantityValue = quantityValue || 0;
            let basePrice = 12;
            totalPrice = 12 * quantityValue;

            if (totalPrice > 0) {
                document.getElementById('priceTag').innerText = `Price : ${totalPrice}`;
            } else {
                document.getElementById('priceTag').innerText = ``;
            }
        }

        function calcDimensions(heightValue, widthValue) {
            let dimensions = heightValue * widthValue;
            if (dimensions > 0) {
                document.getElementById('dimensions').innerText = `Dimensions : ${dimensions}`;
            } else {
                document.getElementById('dimensions').innerText = ``;
            }
        }
        let width = document.getElementById('blindWidth');
        let height = document.getElementById('height');
        let quantity = document.getElementById('quantity');

        width.addEventListener('keyup', () => {
         //   console.log('typing on width');
            let widthValue = width.value || 0;
            let heightValue = height.value || 0;
            let quantityValue = quantity.value || 0;

            calcDimensions(widthValue, heightValue);
            calcPrice(quantityValue);

        })

        height.addEventListener('keyup', () => {
           // console.log('typing on height');
            let widthValue = width.value || 0;
            let heightValue = height.value || 0;
            let quantityValue = quantity.value || 0;

            calcDimensions(widthValue, heightValue);
            calcPrice(quantityValue);

        })

        quantity.addEventListener('keyup', () => {
           // console.log('typing on quantity');
            let widthValue = width.value || 0;
            let heightValue = height.value || 0;
            let quantityValue = quantity.value || 0;

            calcDimensions(widthValue, heightValue);
            calcPrice(quantityValue);

        })
    </script>
</body>

</html>

要进行实时计算，请使用JavaScript事件监听器。

要了解有关事件监听器的更多信息，请参见此article

这是HTML代码，单击“运行快照”以查看其工作原理。

谢谢。

                <!DOCTYPE html>
            <html lang="pt-br">
            <meta charset="utf-8" />

            <head>
                <title>Vote</title>

            </head>

            <body>
                <div>
                    Width :
                    <input type="number" name="" id="blindWidth">
                    <br> Height :
                    <input type="number" name="" id="height">
                    <br> Type :
                    <input type="text" name="" id="Type">
                    <br> Quantity :
                    <input type="number" name="" id="quantity">
                    <br>
                    <div id="priceTag">Fill in the inputs above</div>
                    <div id="dimensions"></div>

                </div>
                <script type="text/javascript">
                    function calcPrice(quantityValue) {
                        quantityValue = quantityValue || 0;
                        let basePrice = 12;
                        totalPrice = 12 * quantityValue;

                        if (totalPrice > 0) {
                            document.getElementById('priceTag').innerText = `Price : ${totalPrice}`;
                        } else {
                            document.getElementById('priceTag').innerText = ``;
                        }
                    }

                    function calcDimensions(heightValue, widthValue) {
                        let dimensions = heightValue * widthValue;
                        if (dimensions > 0) {
                            document.getElementById('dimensions').innerText = `Dimensions : ${dimensions}`;
                        } else {
                            document.getElementById('dimensions').innerText = ``;
                        }
                    }
                    let width = document.getElementById('blindWidth');
                    let height = document.getElementById('height');
                    let quantity = document.getElementById('quantity');

                    width.addEventListener('keyup', () => {
                        console.log('typing on width');
                        let widthValue = width.value || 0;
                        let heightValue = height.value || 0;
                        let quantityValue = quantity.value || 0;

                        calcDimensions(widthValue, heightValue);
                        calcPrice(quantityValue);

                    })

                    height.addEventListener('keyup', () => {
                        console.log('typing on height');
                        let widthValue = width.value || 0;
                        let heightValue = height.value || 0;
                        let quantityValue = quantity.value || 0;

                        calcDimensions(widthValue, heightValue);
                        calcPrice(quantityValue);

                    })

                    quantity.addEventListener('keyup', () => {
                        console.log('typing on quantity');
                        let widthValue = width.value || 0;
                        let heightValue = height.value || 0;
                        let quantityValue = quantity.value || 0;

                        calcDimensions(widthValue, heightValue);
                        calcPrice(quantityValue);

                    })
                </script>
            </body>

            </html>

Answer 2

我在这里尝试了答案，这使我找到了一种更简单的方法，我使用了这种解决方案，该解决方案使我能够计算添加到div中的每个新元素。

 $('.calculate').click(function () {
       let total = 0;
       $(".price").each(function () {
          total = total + parseInt($(this).val());
       });

      $('.quote').html(total);
 });

如何计算添加到HTML div的ajax数据

2 个答案: