Home/ Questions/Q 8294883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T14:23:16+00:00

I’ve got a simple and elementary jquery function for calculate the quantities * unit

  • 0

I’ve got a simple and elementary jquery function for calculate the quantities * unit prices + taxes and subtotals for some products and then the total. I wish to show, in real time, with jquery, the taxes imports for the different taxes rates, based on user choices in the list boxes. I found an elementary method for 2 products but for 3 or many, my method doesn’t work: please help me? 😉

This is my code: demo is [here] http://jsfiddle.net/skipperit/px9tb/8/

<script type='text/javascript'> 
$(function(){
$('#q1,#pu1,#tax1,#tax2,#q2,#pu2').change(function() {
var q1 = parseFloat($('#q1').val(), 10);
var qval1 = 0;
if (q1 > 0) {
    qval1 = q1;
}
var q2 = parseFloat($('#q2').val(), 10);
var qval2 = 0;
if (q2 > 0) {
    qval2 = q2;
}


var pu1 = parseFloat($('#pu1').val(), 10);
var puval1 = 0;
if (pu1 > 0) {
    puval1 = pu1;
}

var pu2 = parseFloat($('#pu2').val(), 10);

var puval2 = 0;
if (pu2 > 0) {
    puval2 = pu2;
}

var subtot1 = 0;
subtot1 =  parseFloat(qval1 * puval1);
var subtot2 = 0;
subtot2 =  parseFloat(qval2 * puval2);
var subtot = 0;
subtot = subtot1 + subtot2;
var tax1 = parseFloat($('#tax1').val(), 10);
var tax2 = parseFloat($('#tax2').val(), 10);
var ivaprice1 = 0;
var ivaprice2 = 0;
if (tax1 > 0) {

    ivaprice1 = subtot1 * tax1 / 100;
}
if (tax2 > 0) {

    ivaprice2 = subtot2 * tax2 / 100;
}
 var ivaprice = 0;
 ivaprice = parseFloat(ivaprice1 + ivaprice2);
var ivatext = "";
ivatext = "tax ";

$('#total').html(parseFloat(subtot + ivaprice).toFixed(2));
$('#tasse').html(parseFloat(ivaprice).toFixed(2));
$('#imp').html(parseFloat(subtot).toFixed(2));
$('#subtot1b').html(parseFloat(subtot1).toFixed(2));
$('#subtot2b').html(parseFloat(subtot2).toFixed(2));

if (tax2 == tax1) {
    $('#taxw').html(parseInt(tax1));
    $('#taxtxt2').html('');
    $('#taxw2').html('');
    $('#taxv').html(parseFloat(ivaprice).toFixed(2));
    $('#taxv2').html('');
    $('#taxtxt2b').html('');
}
else
{
    $('#taxw').html(parseInt(tax1));
    $('#taxw2').html(parseInt(tax2));
    $('#taxtxt2').html('tax');
    $('#taxtxt2b').html('%:');
    $('#taxv').html(parseFloat(ivaprice1).toFixed(2));
    $('#taxv2').html(parseFloat(ivaprice2).toFixed(2));
 }

});
});  

</script>


</head>
<body>
<p>q1 : 
<input id="q1" value="0"/>

pu1 :
<input id="pu1" value="0"/> 
tax1:
<select name="tax1" id="tax1">
<option value="4">4</option>
<option value="21">21</option>
<option value="16">16</option>
</select>
</p>
<p>q2 :
<input id="q2" value="0"/>
pu2 :
<input id="pu2" value="0"/>
tax2 :
 <select name="tax2" id="tax2">
<option value="4">4</option>
<option value="21">21</option>
<option value="16">16</option>
 </select>
 <br>
<br>subtot1: <span id="subtot1b"></span><br>
 subtot2: <span id="subtot2b"></span><br>
tax <span id="taxw"></span>%: <span id="taxv"></span><br>
<span id="taxtxt2"></span> <span id="taxw2"></span><span id="taxtxt2b"></span>    <span    id="taxv2"></span><br>

 taxable: €<span id="imp"></span><br>
 Tax: €<span id="tasse"></span><br>
 Total price : €<span id="total"></span></p>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    DEMO HERE

    html:

    ​<div id="uguu" data-row="5"></div>​​​​​​​​​​​​​​​​​​​​​​​​

    js:

    $(function() {
    (function($) {
        $.fn.extend({
            autobotTransform: function() {
                return this.each(function() {
                    // variables
                    var _this = $(this);
                    var prodCount = _this.attr("data-row");
                    var _opt = '<option value="4">4</option><option value="21">21</option><option value="16">16</option>';

                    // set-up
                    for (i = 1; i <= prodCount; i++) {
                        _this.append('<p class="priceRow">q' + i + ' :<input id="q' + i + '" value="0" />' +
                                     'pu' + i + ' :<input id="pu' + i + '" value="0" />' +
                                     'tax' + i + ':<select name="tax' + i + '" id="tax' + i + '">' +
                                     _opt + '</select>'
                                    );
                    }
                    for (i = 1; i <= prodCount; i++) {
                        _this.append('subtot' + i + ': <span id="subtot' + i +'"></span> ' +
                                     'tax <span id="taxw' + i + '"></span>%: <span id="taxv' +
                                     i + '"></span><br>'
                                    );
                    }
                    $("input, select", _this).on("change", function() {
                        $('p.priceRow').each(function(index) {
                            var __this = $(this);
                            var i = index + 1;
                            $("#subtot" + i).html(
                                ((($("#q" + i).val() > 0) ? parseFloat($("#q" + i).val(), 10) : 0.00)
                                * (($("#pu" + i).val() > 0) ? parseFloat($("#pu" + i).val(), 10) : 0.00)).toFixed(2)
                            );
                            $("#taxw" + i).html($("#tax" + i).val());
                            $("#taxv" + i).html(($("#subtot" + i).html() * $("#tax" + i).val() * 0.01).toFixed(2));
                        });
                    }).trigger("change");
                });
            }
        });
    })(jQuery);

    $("#uguu").autobotTransform();​
});
    • 0