1

Estimada comunidad, junto con saludar a todos, me encuentro en un dilema con un pequeño código, que hasta ahora, no se como solucionar.

El tema es el siguiente, estoy preparando un pequeño sistema de ventas para mi propio emprendimiento. Para ponerlos mas en contexto se trata de un local de papas fritas, que contienen Salsas, Vegetales y ademas el usuario puede añadir "Adicionales", estos últimos, con costo, dependiendo del ingrediente.

Este es mi código para el select:

echo "<div class='col-sm'>
      <div class='form-group'>
        <label>ADICIONALES</label>
        <select multiple class='custom-select' name='adicionales' id='adicionales'>
        <option value='0' selected onclick='reset()'>NINGUNO</option>";
        $s = $mysqli->query("SELECT * FROM ingredientes");
        while ($srow = $s->fetch_array()) {
            echo "<option onclick='sumar(".$srow["precio_ingrediente"].")' value='".$srow["nombre_ingrediente"]."'>".$srow["nombre_ingrediente"]." - $".$srow["precio_ingrediente"]."</option>";
        }
        echo "</select>
      </div>
    </div>";

Al seleccionar uno o mas ingredientes del select multiple, ejecuta una función de jquery (sumar) con el precio correspondiente por ingrediente, el problema surge, que al seleccionar un ingrediente y luego seleccionar otro se va sumando y sumando, aun que solo este uno seleccionado, se suman todos los anteriores. Se me ocurrió hacer una función de reset, pero para ello si o si, hay que presionar NINGUNO.

Alguna idea :)?

Funcion sumar en javascript.

function sumar(valor){
var total = 0;
valor_suma = parseInt(valor);
total = $("#total").val();
total_int = parseInt(total);
suma = total_int + valor_suma;
$("#total").val(suma);

2 respuestas 2

2

Yo te propongo esta idea:

  1. Vas a tener tu select múltiple y vas a hacer uso del input de tipo reset para resetear tu select, es poco útil y de mal agrado tener esta acción como la tienes (una opción más al select de tipo múltiple)

  2. Ocupas el each de jQuery que te permite recoger todos los elementos que cumplan con una coincidencia (una clase, id, etc). En nuestro caso, cada elemento option tiene una clase que se llama .item-option

$(document).ready(function(){
  $("body").on("click", "#enviar-form", function() {
  //arreglo que contendrá los valores de nuestras opciones seleccionadas
    var ids_seleccionados = [],
        acumulador = 0;
    $(".item-option").each(function() {
      //si la opción está seleccionada la agregamos a nuestro arreglo
      if ( $(this).is(":checked") ) {
        ids_seleccionados.push($(this).val());
        acumulador += parseFloat($(this).attr("data-precio"));
      }
    });
    $("#dinero-acumulado").val(acumulador);
    console.log(ids_seleccionados);
    console.log("Dinero acumulado ---> " + acumulador);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<form id="mi-asombroso-form">
  <select multiple="" style="width:100%;">  
    <option data-precio="100" class="item-option" value="1">Opción 1</option>
    <option data-precio="300" class="item-option" value="2">Opción 2</option>
    <option data-precio="500" class="item-option" value="3">Opción 3</option>
  </select>
  
  <button type="reset">Resetear</button>
  <input type="button" id="enviar-form" value="Enviar formulario">
  
  <br>
  <label>Dinero acumulado</label>
  <input type="text" id="dinero-acumulado">
</form>

Para finalizar, ocupamos un botón que ejecuta este each para reunir todos los valores seleccionados.

Actualización

En base a tu necesidad, he hecho que se sumen o acumulen la suma de los elementos seleccionados del select. Además, utilizamos parseFloat para hacerle un cast al string obtenido a un tipo de dato flotante y se permita ser sumado. Es importante mencionar que los valores de los precios los incluimos en un atributo por elemento del select llamado data-precio que recogemos dentro del each en cuestión. Estos ya los debes llenar en tu while dinámico con php

6
  • 1
    Hola Fernando, gracias por compartir tu código conmigo. El problema es que, el usuario al momento de ir seleccionando, debe irse sumando automáticamente en un input, el 17 ene. 2020 a las 1:19
  • 1
    Otra cosa importante a considerar es que cada ingrediente tiene un precio distinto y me debe llegar el nombre del ingrediente una vez enviado. el 17 ene. 2020 a las 1:20
  • 1
    Claro, recapitulando, ¿qué necesitas que cambie para que haga lo que esperas? el 17 ene. 2020 a las 2:01
  • 1
    Al cambiar el select, debe irse sumando en un input el precio de cada ingrediente seleccionado. el 17 ene. 2020 a las 5:44
  • 1
    Muchas gracias Fernando, con un par de modificaciones pude hacer que funcionara perfecto. el 21 ene. 2020 a las 5:25
2

Una idea rápida y pequeña.
Hice el siguiente ejemplo para darte una idea, puedes darle a tu select el evento onchange y poner tu función de suma. dentro de tu select todas las opciones darle el value="" con el precio del ingrediente que van a seleccionar como también una opción de NINGUNO por si el cliente cambia de idea. Aquí el ejemplo de como lo hice yo:

1.- Código del Select Multiple


<select multiple onchange="suma();" class="form-control" id="ingre" name="ingre">
  <option value="reset">Ninguno</option>
  <option value="10">Lechuga</option>
  <option value="55">Tomate</option>
  <option value="31">Cebolla</option>
</select>
<strong>Suma:</strong><input type="text" class="form-control" name="total" id="total">

Lo primero es como te dije anteriormente darle el value a cada una de los opciones, y su respectivo nombre (Obviamente implementado con tu código, dentro del While iría un <option> en donde se en listarán todos los resultados de tu query) y el evento onchange servirá para activar la suma, así el resultado los podrás mostrar en cualquier segmento, yo en mi caso, lo hice en un input.

2.- Código JavaScript


<script type="text/javascript">
  var total = 0;
  function suma(){
    var importe = document.getElementById('ingre').value;
    if(importe == "reset"){
      total = 0;
      document.getElementById("total").value = total;
    }else{
      total = parseInt(total) + parseInt(importe);  
       document.getElementById("total").value = total;
    }
  }
</script>

En esta ultima parte creo variables para almacenar el precio de cada ingrediente y posteriormente sumarlos; Una parte muy importante es que mi variable total, inicializáda en 0 este fuera de mi función, esto es, para que cuando entre en la función se siga sumando todos los precios de ingredientes que se van seleccionando.
Espero que te sirva para darte una idea, o te sirva mi código. ¡Saludos!

EDIT:


Si seguimos el código que puse anteriormente, para obtener el texto (En este caso el ingrediente que estas seleccionando) se puede hacer de la siguiente manera:

var selectIngrediente = document.getElementById("ingre");
var textoIng = selectIngrediente.options[selectIngrediente.selectedIndex].text;

Que si lo implementamos al código que puse anteriormente, quedaría así:

<script type="text/javascript">
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
  });
  var total = 0;
  function suma(){
    var importe = document.getElementById('ingre').value;

    var selectIngrediente = document.getElementById("ingre"); //Aqui es donde identificamos el select de los ingredientes
    var textoIng = selectIngrediente.options[selectIngrediente.selectedIndex].text; //En esta obtenemos el texto de la opcion seleccionada, en este caso el ingrediente

    if(importe == "reset"){
      total = 0;
      document.getElementById("total").value = total;
    }else{
      total = parseInt(total) + parseInt(importe);  
       document.getElementById("total").value = total;
    }
  }
</script>

Dentro de la variable textoIng tendremos el ingrediente que se selecciono, y puedes manipularlo a tu gusto. Un saludo!

4
  • 1
    Excelente idea Marcos, muchas gracias por darte el tiempo y compartirla conmigo, pero me queda una duda, ya que si ocupo el value de el select para poner el precio de cada ingrediente, como puedo saber después que selecciono el cliente? ya que me llegara como resultado el precio en vez del nombre del ingrediente. el 17 ene. 2020 a las 1:09
  • 1
    También por medio de Javascript puedes obtener el ingrediente que estas seleccionando, en pocas palabras estarías obteniendo el Value y el Text, Editare mi respuesta con el código para obtener el texto y saber que ingrediente estas seleccionando. el 17 ene. 2020 a las 15:07
  • 1
    Acabo de editar mi respuesta con código nuevo el 17 ene. 2020 a las 15:15
  • 1
    Hola Marcos, disculpa mi ausencia, estuve de viaje y no pude conectarme antes. Probe tu código y funciona a la perfección, pero he decidido usar el de Fernando ya que me gusta tener el precio en una etiqueta diferente (data-precio). Muchas gracias por tu tiempo :)! el 21 ene. 2020 a las 5:23

Tu Respuesta

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

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