Sum with Jquery

Question

Sum with Jquery

Navigation

#1 by (1 votes)

0

I'm doing a simple calculation of some values:

/****** Cálculos Google Adwords ******/
$('#vd_ga').on('blur', function() {
  var vd_ga = $('#vd_ga').val();
  var pvm_ga = $('#pvm_ga').val();

  $('#vm_ga').val(vd_ga * pvm_ga);
  $('#eam_ga').val(vd_ga * pvm_ga);

  $('#total_1').val(eam_ga + eam_fvs + eam_fcp + eam_is);
});

$('#pvm_ga').on('blur', function() {
  var vd_ga = $('#vd_ga').val();
  var pvm_ga = $('#pvm_ga').val();


  $('#vm_ga').val(vd_ga * pvm_ga);
  $('#eam_ga').val(vd_ga * pvm_ga);

});
/****** Cálculos Google Adwords ******/

/****** Cálculos Facebook visita site ******/
$('#vd_fvs').on('blur', function() {
  var vd_fvs = $('#vd_fvs').val();
  var pvm_fvs = $('#pvm_fvs').val();

  $('#vm_fvs').val(vd_fvs * pvm_fvs);
  $('#eam_fvs').val(vd_fvs * pvm_fvs);
});

$('#pvm_fvs').on('blur', function() {
  var vd_fvs = $('#vd_fvs').val();
  var pvm_fvs = $('#pvm_fvs').val();

  $('#vm_fvs').val(vd_fvs * pvm_fvs);
  $('#eam_fvs').val(vd_fvs * pvm_fvs);
});
/****** Cálculos Facebook visita site ******/

/****** Cálculos Facebook curtida na página ******/
$('#vd_fcp').on('blur', function() {
  var vd_fcp = $('#vd_fcp').val();
  var pvm_fcp = $('#pvm_fcp').val();

  $('#vm_fcp').val(vd_fcp * pvm_fcp);
  $('#eam_fcp').val(vd_fcp * pvm_fcp);
});

$('#pvm_fcp').on('blur', function() {
  var vd_fcp = $('#vd_fcp').val();
  var pvm_fcp = $('#pvm_fcp').val();

  $('#vm_fcp').val(vd_fcp * pvm_fcp);
  $('#eam_fcp').val(vd_fcp * pvm_fcp);
});
/****** Cálculos Facebook curtida na página ******/

/****** Cálculos Instagram seguidores ******/
$('#vd_is').on('blur', function() {
  var vd_is = $('#vd_is').val();
  var pvm_is = $('#pvm_is').val();

  $('#vm_is').val(vd_is * pvm_is);
  $('#eam_is').val(vd_is * pvm_is);
});

$('#pvm_is').on('blur', function() {
  var vd_is = $('#vd_is').val();
  var pvm_is = $('#pvm_is').val();

  $('#vm_is').val(vd_is * pvm_is);
  $('#eam_is').val(vd_is * pvm_is);
});
/****** Cálculos Instagram seguidores ******/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Canais online
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Verba diária
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Período de vericulação mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Verba mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Estimativa de alcance mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Google Adwords
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_ga" id="vd_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_ga" id="pvm_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_ga" id="vm_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_ga" id="eam_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Facebook visita site
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_fvs" id="vd_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_fvs" id="pvm_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_fvs" id="vm_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_fvs" id="eam_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Facebook curtida na página
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_fcp" id="vd_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_fcp" id="pvm_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_fcp" id="vm_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_fcp" id="eam_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Instagram seguidores
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_is" id="vd_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_is" id="pvm_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_is" id="vm_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_is" id="eam_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Valor total verba mês
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="total_1" id="total_1" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
</div>

But the "total_1", which is the sum of the "monthly sum" column I can not think of in any way as it adds up as the fields are populated.

jquery

asked by anonymous 13.02.2018 / 21:05

1 answer

sessionFactory null when trying to select select in the database How to change the colors of a Jquery implementation?

score 1 · Accepted Answer

I think there is a lot of redundancy in your code. You can only use an event handler with oninput to do everything at once as values are entered:

$('#vd_ga, #pvm_ga, #vd_fvs, #pvm_fvs, #vd_fcp, #pvm_fcp, #vd_is, #pvm_is')
.on('input', function(){
  var vd_ga = $('#vd_ga').val();
  var pvm_ga = $('#pvm_ga').val();

  var vd_fvs = $('#vd_fvs').val();
  var pvm_fvs = $('#pvm_fvs').val();

  var vd_fcp = $('#vd_fcp').val();
  var pvm_fcp = $('#pvm_fcp').val();

  var vd_is = $('#vd_is').val();
  var pvm_is = $('#pvm_is').val();

  $('#vm_ga').val(vd_ga * pvm_ga);
  $('#eam_ga').val(vd_ga * pvm_ga);

  $('#vm_fvs').val(vd_fvs * pvm_fvs);
  $('#eam_fvs').val(vd_fvs * pvm_fvs);

  $('#vm_fcp').val(vd_fcp * pvm_fcp);
  $('#eam_fcp').val(vd_fcp * pvm_fcp);
  $('#vm_is').val(vd_is * pvm_is);
  $('#eam_is').val(vd_is * pvm_is);

   var eam_ga = parseFloat($("#eam_ga").val()) || 0;
   var eam_fvs = parseFloat($("#eam_fvs").val()) || 0;
   var eam_fcp = parseFloat($("#eam_fcp").val()) || 0;
   var eam_is = parseFloat($("#eam_is").val()) || 0;
   
   var total_1 = eam_ga + eam_fvs + eam_fcp + eam_is;

   if(!isNaN(total_1)) $('#total_1').val(total_1);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Canais online
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Verba diária
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Período de vericulação mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Verba mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Estimativa de alcance mensal
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Google Adwords
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_ga" id="vd_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_ga" id="pvm_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_ga" id="vm_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_ga" id="eam_ga" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Facebook visita site
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_fvs" id="vd_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_fvs" id="pvm_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_fvs" id="vm_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_fvs" id="eam_fvs" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Facebook curtida na página
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_fcp" id="vd_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_fcp" id="pvm_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_fcp" id="vm_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_fcp" id="eam_fcp" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">
    Instagram seguidores
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_is" id="vd_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_is" id="pvm_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_is" id="vm_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="eam_is" id="eam_is" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Cliques
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    Valor total verba mês
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="total_1" id="total_1" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">

  </div>
</div>

If you put a class in the fields you want to listen to , the selector would look simpler:

$(".classe").on("input",...