Sum with Jquery

Asked

Viewed 121 times

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>
<link rel="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 amount" cannot think of any way that it adds up, while the fields are filled.

jquery

1 answer

1


I think there’s a lot of redundancy in your code. You can only use one 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>
<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>

If you put a class in the fields you want listen to, the dial would be simpler:

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

  • It worked! What would var eam_ga = parseFloat($("#eam_ga").val()) || 0; (These two pipe 0, or whatever the name of it is). I manage well in PHP, but Jquery I’m picking up quite a lot still...

  • It’s called "short circuit evaluation". eam_ga = parseFloat($("#eam_ga").val()) || 0: if parseFloat($("#eam_ga").val()) for false, the value is 0, otherwise, himself.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.