make Javascript work when several events happen

Question

make Javascript work when several events happen

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

4

Good morning!

I have 5 inputs which I want to show in a label the sum of the 5 but dynamically, that is to say as I go digitanto the numbers in the inputs, example if in the iunput 1 I typed the 3 and in the input 2 digité the 4 show me immediately the result in the label or 6 and so on ...

I think I use a script to autocomplete an input that I have it working which detects when a key is pressed and performs a function for the case to complete an input according to a database that does not come to the topic

this is the script

$(document).ready(function()
{
  $('#input_1').typeahead(
  {
    //aquí haré la suma e imprimiré en el label

  });
});

As you can see, it would only be useful for input_1

How can I add more input? separating them by comma after input_1 ?

javascript jquery

asked by Gabriel Uribe Gomez 05.04.2018 в 16:32

source

3 answers

2

make the reference by classes instead of #id

for example

<input type="text" class="example">
<input type="text" class="example">
<input type="text" class="example">

and then

$(document).ready(function()
{
  $('.example').typeahead(
  {
    //aquí haré la suma e imprimiré en el label

  });
});

in this way you binde the event to each input with the example class

answered by 05.04.2018 в 16:41

2

You can use a pattern to select all the inputs by their ids. All the inputs that your id starts with input _ .

HTML

<input id="input_1" type="text">
<input id="input_2" type="text">
<input id="input_3" type="text">
<input id="input_4" type="text">
<input id="input_5" type="text">

JS

$(document).ready(function(){

  $("input[id^='input_']").typeahead(
  {
    //aquí haré la suma e imprimiré en el label

  });
});

answered by 05.04.2018 в 16:53

Explode in PHP to separate characters Sort Array using an int variable from another class

score 2 · Accepted Answer

$(document).ready(function() {
  //guardara el total
  var total = 0;

  //cuando haya un cambio en el input
  //Si no quisieras tomar todos los input bastara con asignarles una clase 
  //Si asignas una clase bastara con $('input') por $('.tuclase')
  $('input').change(function() {

    //valida que sea un numero
    if (!isNaN($(this).val())) {

      //va acumulando el total
      total += Number($(this).val());

      //muestra el total
      $("#resultado").text(total);

    } else {
      //Si no introduce numero genera alerta
      alert("Debe ingresar un numero");
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text"><br>
<p>Total: <span id="resultado"> 0</span></p>

EDIT

$(document).ready(function() {

  //cada vez que el usuario orpime una tacla
  $('input').keyup(function() {
    var total = 0;

    //recorremos los input para que haga la suma
    $("input").each(
      function(index, value) {
        if ($.isNumeric($(this).val())) {
          total = total + eval($(this).val());
        }
      });
    $("#resultado").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text"><br>
<p>Total: <span id="resultado"> 0</span></p>