jquery自动计算字段并将它们添加到一起

时间:2014-08-12 12:18:23

标签: javascript jquery html forms

有点新的这个jquery,但是我在搜索时读到了我的方式,结果就是你在下面看到的,并且它来回地工作......几乎!和合

我最终想要它做什么: 用户插入货币值,在每个字段下方,它按照您在税率15%或25%的代码中看到的计算输入。 对于最后一个输入字段,它应该只复制插入同一页面上另一个字段的相同值,最后,计算所有字段以显示在底部并显示在底部。 现在我卡住了,我怎么能设法做到这一点?

感谢所有帮助=)

<!-- 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));
});

1 个答案:

答案 0 :(得分:1)

$('#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));
});

演示:

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