0

He buscado y no he encontrado nada...

Imaginen una factura con detalle de productos. En detalle productos tengo un input y me gustaría que, una vez que yo ingrese en el input un valor "+1+6+10", al perder foco ese value del input sea 17

ejemplo:

<x-jet-input id="total_item" type="text" class="mt-1 block w-full form-control shadow-none" wire:model.defer="total_item" />

1 respuesta 1

0

Puedes pasar el valor "+1+6+10" en el input de tipo string y recoger el valor en JS. Luego lo conviertes en un array con split('+'), recorres cada elemento con for of para sumar los valores y finalmente le devuelves el total al value del mismo input:

//El evento blur ejecuta la operación al perder el foco
$('#total_item').on('blur', function() {
  //Obtener el value del input
  let cadena = $('#total_item').val();
  //Convertir los valores en un array separando por el signo +
  let numeros = cadena.split('+');
  //Inicializar la variable suma en cero
  let total = 0;
  //Recorrer el array para sumar cada elemento
  for (let n of numeros) {
    //Verificar si el string no viene vacío 
    //para convertirlo a número con parseInt(n)
    //o asignarle cero
    numero = n != '' ? parseInt(n) : 0;
    //Incrementar la variable suma con las validaciones
    total += numero;
  }
  //Enviar el resultado al value del input
  $('#total_item').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="total_item" type="text" />

Es importante la validación n != '' ya que el primer elemento será un string vacío ['','1','6','10'].

El código se puede simplificar, pero lo hice lo mas desglosado posible para que comprendas la explicación de cada paso. Al final se vería así:

$('#total_item').on('blur', function() {
  let numeros = $('#total_item').val().split('+');
  let total = 0;
  for (let n of numeros) {
    total += n != '' ? parseInt(n) : 0;
  }
  $('#total_item').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="total_item" type="text" />

Hay otros métodos alternativos al for of, tales como reduce, foreach, el clásico for, entre otras. Pero eso te lo dejo de tarea para que conozcas diferentes opciones y escojas la que mejor se adapte a tu proyecto.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.