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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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