Calculation of jQuery threaded percentage

Question

Calculation of jQuery threaded percentage

Navigation

#1 by (0 votes)

1

Good I am challenged to calculate the final value of the product on the same page without refresh, with 4 fields of discounts on a gross value presenting the unit and total result (items of a purchase order or invoice regardless of the name attributed). I think that by the image it is easier to evaluate the result that I intend. Entering the quantity and percentages field, automating the fields "Unit" and "Total" change as if it were an excel calculator or worksheet.

Gross = gross table price

Chained discounts = discounts to be applied on the gross price of the merchandise.

Example: Gross = $ 100.00 - Quantity = 2 pieces

Discounts to be applied: 40 + 10 + 10 + 29

Unit total = $ 34,506

Item Total (* Quantity) = $ 69.01

Thank you in advance.

Thiswastheclosestthingtotheresult.Inthiscaseitmultipliestheunitariobythequantitythatiswrongbutiftheunitariois1,thediscountsarecalculatedcorrectly:

<inputclass="form-control" type="text" id="bruto" readonly="readonly" value="200">

<input class="text-right form-control" type="number" placeholder="Qtde" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

<input class="text-right form-control" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />



$('input').on('keyup',function(){

    var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

    var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

    var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1

      // desconto 1
      $('#unitario').val(br-(br*(d1/100)));
      $('#total').val(qt*(br-(br*(d1/100))));

      // desconto 2  
      var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
      var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
      var totd2 = tot-(tot*(d2/100));


      $('#unitario').val(totd2);
      $('#total').val(qt*totd2);


      // desconto 3  
      var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

      $('#unitario').val(totd2-(totd2*(d3/100)));
      $('#total').val(qt*(totd2-(totd2*(d3/100))));

      // desconto 4
      var vlrD3 = totd2-(totd2*(d3/100));
      var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
      //console.log(vlrD3-(vlrD3*(d4/100)));

      $('#unitario').val(vlrD3-(vlrD3*(d4/100)));
      $('#total').val(qt*(vlrD3-(vlrD3*(d4/100))));

});

php javascript jquery porcentagem

asked by anonymous 23.01.2018 / 14:34

1 answer

Overlap Div with Navbar Error when starting Context Entity Framework: Function requires all threads to be executed

score 0 · Accepted Answer

I think the problem is only in qt* intermediate multiplications. Leave only the last $('#total').val that will have the expected result:

$('input').on('keyup',function(){

    var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

    var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

    var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1

      // desconto 1
      $('#unitario').val(br-(br*(d1/100)));
      $('#total').val((br-(br*(d1/100))));

      // desconto 2  
      var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
      var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
      var totd2 = tot-(tot*(d2/100));


      $('#unitario').val(totd2);
      $('#total').val(totd2);


      // desconto 3  
      var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

      $('#unitario').val(totd2-(totd2*(d3/100)));
      $('#total').val((totd2-(totd2*(d3/100))));

      // desconto 4
      var vlrD3 = totd2-(totd2*(d3/100));
      var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
      //console.log(vlrD3-(vlrD3*(d4/100)));

      $('#unitario').val((vlrD3-(vlrD3*(d4/100))).toFixed(2));
      $('#total').val((qt*(vlrD3-(vlrD3*(d4/100)))).toFixed(2));

});

//a linha abaixo é apenas para o exemplo
$('input').trigger('keyup');

.TableCSS table {
    font-size:12px; 
    color:#000; 
    width:100%; 
    border-width: 1px; 
    border-color: #a9a9a9;
    border-collapse: collapse;  
    zoom: 100%; 
    text-align:left;
}
.TableCSS th {
    white-space: nowrap!important;
    font-size:12px;
    background-color:#ffffff;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9; 
    text-align:left; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-style: italic;

}
.TableCSS tr {
    background-color:#ffffff; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    text-align:center;
}
.TableCSS td {
    font-size: 12px;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9;
    text-align:left;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-top: 0px; 
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputclass="form-control" type="text" id="bruto" readonly="readonly" value="100">
<input class="text-right form-control" type="number" placeholder="Qtde" value="2" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

<input class="text-right form-control" value="40" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="29" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />

<input id="unitario" />
<input id="total" />