添加多个输入并在另一个输入中显示

时间:2016-03-20 00:23:34

标签: jquery html5

我有以下类的以下输入:

20 x输入,类为.amount1 带有.a​​mount2类的20 x输入 20 x输入,类为.amount3

<td><input class="amount1" id="input_a" type="text" placeholder="Weekly $"></td>
<td><input class="amount2" id="input_a_ans" type="text" placeholder="Fortnightly $" readonly></td>
<td><input class="amount3" id="input_a_year" type="text" placeholder="Yearly $" readonly></td>

然后我有3个带ID的输入:

1 x input_week 1 x input_fort 1 x input_year

<input class="totals" id="input_week" type="text" readonly>
<input class="totals" id="input_fort" type="text" readonly>
<input class="totals" id="input_year" type="text" readonly>

我试图做的是将所有输入到类中的数值(.amount1 .amount2 .amount3)加在一起;所以.amount1加在一起,所有.amount2加在一起,所有.amount3加在一起。然后我需要将这些添加的金额显示在ID中。所以.amount1的总和将显示在#input_week e.t.c中。我试过的JS是:

<script>

$('.amount1').keyup(function () {
    var stockTemp = 0;
    $('.amount1').each(function () {
        stockTemp += parseInt($(this).val()) || 0;
    });
    $('#input_week').val(stockTemp);
});

</script>

这个JS已经返回了一些结果,即它已经为上面的类和输入工作了,但它无法确定小数点,这对我正在做的事情是必要的。当我尝试添加以下JS时:

<script>

$('.amount2').keyup(function () {
    var stockTemp = 0;
    $('.amount2').each(function () {
        stockTemp += parseInt($(this).val()) || 0;
    });
    $('#input_fort').val(stockTemp);
});

</script>

根本没有任何事情发生。如何将其输入到课程中的总数中,并将这些总数显示在必要的ID中;如果输入到类中的值具有小数点,则包括小数点。

感谢。

1 个答案:

答案 0 :(得分:0)

这就是我自动预填充.amount2和.amount3的方式。我定位ID以获得所需的结果而不是类。

<script>

    $("input").keyup(function(){

    var getInId = $(this).attr('id');
    var getOutId = $('#'+getInId+'_ans').attr('id');
    var getOutyear = $('#'+getInId+'_year').attr('id');
    var getInVal = document.getElementById(getInId).value;

     if(!isNaN(getInVal)){ 

      var result = (getInVal * '2');
      $('#'+getOutId).val(result);

       var yearResult = (result * '26');
       $('#'+getOutyear).val(yearResult);

     }
     else{
        $('#'+getOutId).val("");
         alert("Please enter a valid number");
     }
    });

    </script>