Update fields dynamically

Question

I need my code to update the Increment field when the value of the Total field is changed to a value greater than the value of the Sub.Total or update the Discount field when the Total field is smaller than the Sub.Total field with the value of the difference, and when a value is added in the Increase field or in the Discount field it updates the Total field.

In my code the field Total is already working correctly when the field Increase or Discount is updated, but I need to work the other way too, as I put above, IE, update also the field Increase and Discount when changed the field Total.

This is the HTML code

        <div id="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) : "");}

Answer 1

Face this very confused what is your difficulty, so I’ll give you an example of how to update a field with the values of another.

See how I simplified it? , I suggest you edit your question so that it is well defined the problem, and do not ask the question all the other problems equal, only an example of the difficulty is enough, once you receive a test answer in a single case, if it works just apply ityou to others so your question becomes 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>
<div id="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>