Skip to main content
se eliminaron 393 caracteres en el cuerpo
Origen Enlace
Emeeus
  • 7.4k
  • 11
  • 25
$('.multi').keyup(function() {

  var resprecio = [];
 
  var cantscantidad = [];

  $('.multi'precio').each(function(i, obj) {
    resprecio.push(+obj.value);
  });

  $('.cantidad').each(function(i, obj) {
    cantidad.push(+obj.value);
  });

  var resultado = res0;

  precio.reducemap((po,c i)=>p*c => {
    resultado += o * cantidad[i];
  });

  $("#result").val(resultado); 

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi"><br>class="multi precio"> precio<br>
  <input type="text" class="multi"><br>class="multi cantidad"> cantidad<br><br>
  <input type="text" class="multi"><br>class="multi precio"> precio<br>
  <input type="text" class="multi"><br>class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi"><br>class="multi precio"> precio<br>
  <input type="text" class="multi"><br>class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi"><br>class="multi precio"> precio<br>
  <input type="text" class="multi"><br>class="multi cantidad">cantidad<br><br><br>
  <input type="text" id="result">id="result">resultado
</form>

En el ejemplo precedente, los elementos vacíos se consideran cero, entonces siempre va a dar cero a no ser que llenemos todos los inputs. Pero también se podrían no calcular los inputs vacios.


<script>
    $('.quantity, price').keyup(function() {
        var res = [];

        var c = $('.quantity').each(function(i, obj) {
            res.push(+obj.value);
        });

        var p = $('.price').each(function(i, obj) {
            res.push(+obj.value);
        });

        var resultado = res.reduce((p,c)=>p*c);

        $("#result").val(resultado); 
    })
</script>
$('.multi').keyup(function() {

var res = [];
 
  var cants = $('.multi').each(function(i, obj) {
    res.push(+obj.value);
});

var resultado = res.reduce((p,c)=>p*c);

$("#result").val(resultado); 

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" id="result">
</form>

En el ejemplo precedente, los elementos vacíos se consideran cero, entonces siempre va a dar cero a no ser que llenemos todos los inputs. Pero también se podrían no calcular los inputs vacios.


<script>
    $('.quantity, price').keyup(function() {
        var res = [];

        var c = $('.quantity').each(function(i, obj) {
            res.push(+obj.value);
        });

        var p = $('.price').each(function(i, obj) {
            res.push(+obj.value);
        });

        var resultado = res.reduce((p,c)=>p*c);

        $("#result").val(resultado); 
    })
</script>
$('.multi').keyup(function() {

  var precio = [];
  var cantidad = [];

  $('.precio').each(function(i, obj) {
    precio.push(+obj.value);
  });

  $('.cantidad').each(function(i, obj) {
    cantidad.push(+obj.value);
  });

  var resultado = 0;

  precio.map((o, i) => {
    resultado += o * cantidad[i];
  });

  $("#result").val(resultado);

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad"> cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br><br>
  <input type="text" id="result">resultado
</form>

<script>
    $('.quantity, price').keyup(function() {
        var res = [];

        var c = $('.quantity').each(function(i, obj) {
            res.push(+obj.value);
        });

        var p = $('.price').each(function(i, obj) {
            res.push(+obj.value);
        });

        var resultado = res.reduce((p,c)=>p*c);

        $("#result").val(resultado); 
    })
</script>

<script>
    $('.quantity, price').keyup(function() {
        var res = [];

        var c = $('.quantity').each(function(i, obj) {
            res.push(+obj.value);
        });

        var p = $('.price').each(function(i, obj) {
            res.push(+obj.value);
        });

        var resultado = res.reduce((p,c)=>p*c);

        $("#result").val(resultado); 
    })
</script>
se añadieron 1213 caracteres en el cuerpo
Origen Enlace
Emeeus
  • 7.4k
  • 11
  • 25

Podrías buscar los elementos usando $('selector') de jquery, así:

$('#quantity, #price').keyup(function() {
  var cant = parseFloat($('#quantity').val()) || 0;
  var price = parseFloat($('#price').val()) || 0;
  var result = cant * price
  $('.result').val(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="quantity"><br>
  <input type="text" id="price"><br>
  <input type="text" class="result">
</form>

nextElementSibling funcionaria si haces algo como document.getElementById("quantity").nextElementSibling pero te seleccionaría el hermano de quantity, que es price y no creo que sea muy práctico usarlo así, incluso, en el caso del código que pegué el hermano sería <br>.

Si quieres multiplicar ítems agregados dinamicamente, puedes usar clases en lugar de ids:

$('.multi').keyup(function() {

var res = [];

  var cants = $('.multi').each(function(i, obj) {
    res.push(+obj.value);
});

var resultado = res.reduce((p,c)=>p*c);

$("#result").val(resultado); 

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" id="result">
</form>

En el ejemplo precedente, los elementos vacíos se consideran cero, entonces siempre va a dar cero a no ser que llenemos todos los inputs. Pero también se podrían no calcular los inputs vacios.

Podrías buscar los elementos usando $('selector') de jquery, así:

$('#quantity, #price').keyup(function() {
  var cant = parseFloat($('#quantity').val()) || 0;
  var price = parseFloat($('#price').val()) || 0;
  var result = cant * price
  $('.result').val(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="quantity"><br>
  <input type="text" id="price"><br>
  <input type="text" class="result">
</form>

nextElementSibling funcionaria si haces algo como document.getElementById("quantity").nextElementSibling pero te seleccionaría el hermano de quantity, que es price y no creo que sea muy práctico usarlo así, incluso, en el caso del código que pegué el hermano sería <br>.

Podrías buscar los elementos usando $('selector') de jquery, así:

$('#quantity, #price').keyup(function() {
  var cant = parseFloat($('#quantity').val()) || 0;
  var price = parseFloat($('#price').val()) || 0;
  var result = cant * price
  $('.result').val(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="quantity"><br>
  <input type="text" id="price"><br>
  <input type="text" class="result">
</form>

nextElementSibling funcionaria si haces algo como document.getElementById("quantity").nextElementSibling pero te seleccionaría el hermano de quantity, que es price y no creo que sea muy práctico usarlo así, incluso, en el caso del código que pegué el hermano sería <br>.

Si quieres multiplicar ítems agregados dinamicamente, puedes usar clases en lugar de ids:

$('.multi').keyup(function() {

var res = [];

  var cants = $('.multi').each(function(i, obj) {
    res.push(+obj.value);
});

var resultado = res.reduce((p,c)=>p*c);

$("#result").val(resultado); 

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" class="multi"><br>
  <input type="text" id="result">
</form>

En el ejemplo precedente, los elementos vacíos se consideran cero, entonces siempre va a dar cero a no ser que llenemos todos los inputs. Pero también se podrían no calcular los inputs vacios.

se añadieron 254 caracteres en el cuerpo
Origen Enlace
Emeeus
  • 7.4k
  • 11
  • 25
Loading
Origen Enlace
Emeeus
  • 7.4k
  • 11
  • 25
Loading