I do an autosum of fields, but it does not show the value in textbox

Question

I do an autosum of fields, but it does not show the value in textbox

Navigation

#1 by (2 votes)

1

What can be wrong in my function?

$(function() {
  $('#sumAll').Keydown(function() {
    var add = 0;
    $('.cl').each(function() {
      add += Number($(this).val());
    });
    $('#sumAll').text(+ add);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<head>
  <title>Sum TextBox values</title>
</head>
<body>
  <input id="Text1" class="cl" type="text" /><br />
  <input id="Text2" class="cl" type="text" /><br />
  <input id="Text3" class="cl" type="text" /><br />  
  <input id="sumAll" type="text" value="" /><br />
</body>
</html>
</body>
</html>

javascript jquery

asked by Hlvr 03.11.2016 в 15:17

source

1 answer

Problem with php page Regular expression that matches a range of hours within a string

score 2 · Accepted Answer

I do not understand why you occupy the event keydown , when this what it does is that if the user writes in an input there is just called the event. I would recommend that if you want to do an "autosuma" play with the event onChange

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  function suma() {
      var add = 0;
      $('.cl').each(function() {
          if (!isNaN($(this).val())) {
              add += Number($(this).val());
          }
      });
      $('#sumAll').val(add);
  };
  </script>
</head>

<body>
  <input id="Text1" class="cl" type="text" onChange="suma();" />
  <br />
  <input id="Text2" class="cl" type="text" onChange="suma();" />
  <br />
  <input id="Text3" class="cl" type="text" onChange="suma();" />
  <br />
  <input id="sumAll" type="text" value="" />
  <br />
</body>

</html>

This is what you do while changing the values of your inputs, adding them but verifying that the content of each one is a number.