Update fields dynamically

4

I need my code to update the Override field when the Total field value is changed to a value greater than the Sub.Total value or refresh the Discount field when the Total field is smaller than the Sub.Total field with the value, and when you add a value in the Append field or in the Discount field it updates the Total field.

In my code, the Total field is already working properly when the Add or Rebate field is updated, but I need to work in reverse as well, as I did above, that is, also update the Override and Override fields when the Total field changes.

ThisistheHTMLcode

<divid="DivOcultaBaixa" class="" style="display: none;">
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Sub. Total:</div>
                <input class="input-medium focused span6 calc" name="subtotal" id="subtotal"  readonly="readonly" type="text" value="<?php echo number_format($soma_saldo, 2, ',', '.') ?>"/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Acréscimo:</div>
                <input class="input-medium focused span6 calc" name="acrescimo" id="acrescimo"  type="text" value=""/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Desconto:</div>
                <input class="input-medium focused span6 calc" name="desconto" id="desconto"  type="text" value=""/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput"><strong>TOTAL:</strong></div>
                <input type="text" id="total_val" style="background: #FFCC99; font-weight: bold;" name="total_val" class="input-medium focused span6 result" readonly="readonly" value="<?php echo number_format($soma_saldo, 2, ',', '.') ?>"/>
            </div>
            <div class="control-group span3">
                    <div class="control span4" for="focusedInput">Valor Pago:</div>
                    <input class="input-medium focused span6 calc" name="pagoparc" id="pagoparc"  type="text" value=""/>
                </div>
                <div class="control-group span3">
                    <div class="control span4" for="focusedInput"><strong>SALDO:</strong></div>
                    <input class="input-medium focused span6 calc" style="background: #FFCC99; font-weight: bold;" name="saldodev" id="saldodev"  type="text" value="<?php echo number_format($soma_saldo, 2, ',', '.') ?>"/>
                </div>
        </div>

Script js

$(document).ready(function(){
    //Quando o valor do campo mudar...
    $('.calc').change(function(){
        var subtotal = parseFloat($('#subtotal').val().replace(".", "").replace(",", ".")) || 0.00;
        var acrescimo = parseFloat($('#acrescimo').val().replace(".", "").replace(",", ".")) || 0.00;
        var desconto = parseFloat($('#desconto').val().replace(".", "").replace(",", ".")) || 0.00;
        var pagoparc = parseFloat($('#pagoparc').val().replace(".", "").replace(",", ".")) || 0.00;

        //O total 
        var total = subtotal + acrescimo - desconto;
        var saldo = total - pagoparc;

        $('#total_val').val(number_format(total,2, ',', '.'));
        $('#saldodev').val(number_format(saldo,2, ',', '.'));

    });
});

function number_format( number, decimals, dec_point, thousands_sep ) {
var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
var d = dec_point == undefined ? "," : dec_point;
var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");}
    
asked by anonymous 03.12.2014 / 18:24

1 answer

3

See how I simplified it? I suggest you edit your question so that the problem is well defined, and do not put all other problems in the same question, just one example of the difficulty is enough, once you receive a test response in one only case, if it works just apply it to others so your question is short and easy to understand.

From this example below tell me what you would like to be different?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="DivOcultaBaixa" class="" >
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Sub. Total:</div>
                <input class="input-medium focused span6 calc" name="subtotal" id="subtotal"  readonly="readonly" type="text" value="40"/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Acréscimo:</div>
                <input class="input-medium focused span6 calc" name="acrescimo" id="acrescimo"  type="text" value=""/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput">Desconto:</div>
                <input class="input-medium focused span6 calc" name="desconto" id="desconto"  type="text" value=""/>
            </div>
            <div class="control-group span3">
                <div class="control span4" for="focusedInput"><strong>TOTAL:</strong></div>
                <input type="text" id="total_val" style="background: #FFCC99; font-weight: bold;" name="total_val" class="input-medium focused span6 result" readonly="readonly" value="40"/>
            </div>
            <div class="control-group span3">
                    <div class="control span4" for="focusedInput">Valor Pago:</div>
                    <input class="input-medium focused span6 calc" name="pagoparc" id="pagoparc"  type="text" value=""/>
                </div>
                <div class="control-group span3">
                    <div class="control span4" for="focusedInput"><strong>SALDO:</strong></div>
                    <input class="input-medium focused span6 calc" style="background: #FFCC99; font-weight: bold;" name="saldodev" id="saldodev"  type="text" value="40"/>
                </div>
        </div>
    <script src="js/js_1.9/jquery-1.8.2.min.js" type="text/javascript"></script>                
    <script type="text/javascript">    
        
        $(document).ready(function(){
            //Quando o valor do campo mudar...
            $('.calc').keyup(function(){
                var subtotal = parseFloat($('#subtotal').val().replace(".", "").replace(",", ".")) || 0.00;
                var acrescimo = parseFloat($('#acrescimo').val().replace(".", "").replace(",", ".")) || 0.00;
                var desconto = parseFloat($('#desconto').val().replace(".", "").replace(",", ".")) || 0.00;
                var pagoparc = parseFloat($('#pagoparc').val().replace(".", "").replace(",", ".")) || 0.00;

                //O total 
                var total = subtotal + acrescimo - desconto;
                var saldo = total - pagoparc;

                $('#total_val').val(number_format(total,2, ',', '.'));
                $('#saldodev').val(number_format(saldo,2, ',', '.'));

            });
        });

    function number_format( number, decimals, dec_point, thousands_sep ) {
    var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
    var d = dec_point == undefined ? "," : dec_point;
    var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
    var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");}
        
    </script>
</html>
    
20.08.2015 / 19:50