Сумма значений полей формы в jQuery

0

Кажется, я не могу заставить это работать для проекта, который я делаю. В основном я пытаюсь получить значения в полях "Доход", чтобы они были в нижней части в поле "Общий доход".

Я сделал JSFiddle, который, надеюсь, облегчит работу understand-

Разметка HTML:

<div class="form-group">
            <label class="control-label col-md-2">April</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="AprilInput" placeholder="eg. 35,328" type="text" id="AprilInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="Output" id="AprilOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

      <div class="form-group">
            <label class="control-label col-md-2">May</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="MayInput" placeholder="eg. 35,328" type="text" id="MayInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control1" name="Output" id="MayOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

      <div class="form-group">
            <label class="control-label col-md-2">June</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="JuneInput" placeholder="eg. 35,328" type="text" id="JuneInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control1" name="Output" id="JuneOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

<br/>

<span class="form-horizontal">
<div class="row">
  <div class="col-lg-12">
    <div class="widget-container fluid-height clearfix">
      <div class="heading">
        <i class="icon-reorder"></i>Annual Total
      </div>
      <div class="widget-content padded">

      <div class="form-group">
            <label class="control-label col-md-6">Total Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="TotalOutput" id="TotalOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>
  • 1
    Наблюдение - вы не закрываете входные теги такими, какие вы есть, они являются самозакрывающимися тегами, поэтому <input /> NOT <input> </ input>
  • 0
    Можете ли вы показать свой код JS, а также, пожалуйста.
Показать ещё 3 комментария
Теги:

5 ответов

1
Лучший ответ

Вы можете немного привести в порядок код:

   function SetupInput(obj,output,sumfunction){
        $(obj).keyup(function(){
            var n = parseInt($(this).val());
            var n = this.value.replace(/,/g, "");

            if(n <= 155000) {
                $(output).val(numberWithCommas((n/100*70).toFixed(0)));
            }
            else if(n <= 175000) {
                $(output).val(numberWithCommas((n/100*75).toFixed(0)));
            }
            else {
                $(output).val(numberWithCommas((n/100*80).toFixed(0)));
            }
            sumfunction();
        });
    }
    SetupInput($('#AprilInput')[0],$('#AprilOutput')[0],calculateSum);
    SetupInput($('#MayInput')[0],$('#MayOutput')[0],calculateSum);
    SetupInput($('#JuneInput')[0],$('#JuneOutput')[0],calculateSum);
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }



function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".form-control1").each(function() {
        //add only if the value is number
        var value=this.value.replace(',','');//remove ','

        if(!isNaN(value) && value.length!=0) {
            sum += parseFloat(value);
            console.log(this.id,sum);
        }
    });

    //.toFixed() method to roundoff the final sum
    $("#TotalOutput").val(sum.toFixed(0));
}

Проверьте jsfiddle: http://jsfiddle.net/2jY6P/43/

Поделиться
  • 0
    Спасибо, куча @ liu3hao. Очень признателен!
1

Вы выполняете цикл с тегом Output. Измените его на .form-contol:

$(".form-control").each(function() { /* ... */ }

И не.html, но.val():

'$("#TotalOutput").val(sum.toFixed(0));'
Поделиться
0

Я внес некоторые изменения в

http://jsfiddle.net/2jY6P/39/

$(document).keyup(function() {
    var sumRevenue = 0;
    $.each($(".revenue"), function() {
       var val = $.trim($(this).val());
       if(val != "")
           sumRevenue += parseFloat(val); 
    });
    $("#sumrevenue").val(sumRevenue);
});
Поделиться
  • 0
    Спасибо @ Cracker0dks! Однако он не справляется с запятыми (когда значение достигает 1000), и я действительно нуждаюсь в них. Я думал, что они дойдут до общего также.
  • 0
    потому что точка используется нормально ... обновить с помощью функции замены запятой: jsfiddle.net/2jY6P/51
0

Я редактировал вам код: http://jsfiddle.net/2jY6P/38/

изменена:

$(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event


            $("input[name='Output']").keyup(function(){

                calculateSum();
            });

    });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $("input[name='Output']").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method to roundoff the final sum
        $("#TotalOutput").val(sum.toFixed(0));
    }

$('Output') следует ввести $("[name='Output']")

$ ( "# TotalOutput") HTML (sum.toFixed(0)).

должен быть $("#TotalOutput").val(sum.toFixed(0));

Поделиться
  • 0
    Спасибо за это. По какой-то причине, когда значение равно 1000, оно не рассчитывается (или не добавляет запятые - я думал, что они будут выполняться?).
  • 0
    потому что вы получите число с ',', преобразуйте его в. перед + =
0 
   function calculateTotalREv(){ 
      var totalRev = 0;
  $("input[name='Output']").each(function() {
    totalRev = eval(total+parseFloat($(this).val()));
  });
      alert(totalRev);
    }
    calculateTotalREv();
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню