CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Kommersnart
Kommersnart

Reputation: 33

jquery auto calculate fields and adding them togheter

Kinda new to this jquery, but what i read my way when searhing and the result of that is what you see down below, and it works after back and forth..almost! hehe

What i want it to do finally: User insert value of currency, right under each field, it calculates the input as you see in code with tax 15% or 25%. For the last input field, it should only copy the same value inserted into another field on the same page, and finally, calculate all the fields togheter and display on the bottom. Now im stuck, how can i manage to do that ?

Thanks for all help =)

<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="15_mva">15% MVA:</label>
    <div class="col-md-4">
        <input pattern="\d*" id="15_mva" name="15_mva" type="text" placeholder="Kr." class="form-control input-md" /> <span id="sum15"></span>
    </div>
</div>

<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="25_mva">25% MVA:</label>
    <div class="col-md-4">
        <input pattern="\d*" id="25_mva" name="25_mva" type="text" placeholder="Kr." class="form-control input-md" /> <span id="sum25"></span>
    </div>
</div>

<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="utleie">Utleie:</label>
    <div class="col-md-4">
        <input pattern="\d*" id="utleie" name="utleie" type="text" placeholder="Kr." class="form-control input-md" />
        <input type="text" id="sumutleie" />Total: <span id="sum"></span>
    </div>
</div>


$('#15_mva').keyup(function () { // run anytime the value changes

    var Verdi = parseFloat($('#15_mva').val()) || 0;
    var Verdi = $(this).val().replace(",", ".");
    $(this).val(Verdi);
    var Total = Verdi / 15 * 100;
    $("#sum15").html(Total.toFixed(2));
});

$('#25_mva').keyup(function () { // run anytime the value changes

    var Verdi = parseFloat($('#25_mva').val()) || 0;
    var Verdi = $(this).val().replace(",", ".");
    $(this).val(Verdi);
    var Total = Verdi / 25 * 100;
    $("#sum25").html(Total.toFixed(2));
});

$(function () {
    $("#utleie").change(function () {
        $('#sumutleie').val(this.value);
    });
});

$('input').keyup(function () { // run anytime the value changes

    var Verdi = parseFloat($('#sum15').val()) || 0;
    var Verdi2 = parseFloat($('#sum25').val()) || 0;
    var Verdi3 = parseFloat($('#sumutleie').val()) || 0;
    var Verdi4 = $(this).val().replace(",", ".");
    $(this).val(Verdi);
    var Total = Verdi + Verdi2 + Verdi3 + Verdi4;
    $("#sum").html(Total.toFixed(2));
});

Upvotes: 0

Views: 1262

Answers (1)

RGS
RGS

Reputation: 5211

$('#15_mva').on('blur',function () { // run anytime the value changes 
   var Verdi = parseFloat($('#15_mva').val()) || 0;
   var Verdi = $(this).val().replace(",", ".");
   $(this).val(Verdi);
   var Total = Verdi / 15 * 100;
   $("#sum15").html(Total.toFixed(2));
});

$('#25_mva').on('blur', function () { // run anytime the value changes
   var Verdi = parseFloat($('#25_mva').val()) || 0;
   var Verdi = $(this).val().replace(",", ".");
   $(this).val(Verdi);
   var Total = Verdi / 25 * 100;
   $("#sum25").html(Total.toFixed(2));
});

$("#utleie").on('blur', function () {
   var Verdi = parseFloat($('#sum15').html()) || 0;
   var Verdi2 = parseFloat($('#sum25').html()) || 0;
   var Verdi3 = parseFloat($(this).val()) || 0;   
   var Total = Verdi + Verdi2 + Verdi3;
   $('#sumutleie').val(this.value);
   $("#sum").html(Total.toFixed(2));
});

Demo:

http://jsfiddle.net/wf4zdfk2/6/

Upvotes: 1

Related Questions