1

Tengo un select y tiene 4 valores (uno por option) y lo que quiero es obtener el valor de ese option y evaluarlo con un switch ejemplo

Café Latte

y el valor de ese option lo pongo en un switch y si es 1 tengo que obtener el texto y hacer una operación y después convertirlo a json y mandarlo a un archivo php por medio de Ajax intente algo pero me recarga la pagina lo cual no lo debe de hacer . Se que hay mejores maneras de hacerlo pero no se me ocurrió de otra manera de solucionarlo espero haberme explicado

  function pedido() {
            Swal.fire(
                'Good job!',
                'You clicked the button!',
                'success'
            )
        }
        $(function () {
            /*Evitar funciones in line*/
            $('#Opcion').on('change', function () {
                /*Referencia al option seleccionado*/
                let mSelect = $('option:selected', this);
                let opcion = mSelect.val();
                let Nombre = mSelect.text();
                let valor = $('#cantidad').val();

                let postData = {
                    Nombre: Nombre,
                    cantidad: valor,
                    Precio: mSelect.data('precio'),
                    Total: valor * mSelect.data('precio')
                };

                console.log(postData);

                $.ajax({
                    url: 'php/procesos/insertarProductos.php',
                    method: 'post',
                    dataType: 'json',
                    data: postData
                }).done(function (data) {
                    pedido();
                    console.log(data);
                })
            });
        });
.areaProductos {
    margin: 2rem;
    width: 100%;
    height: 50rem;
    background: #c7c7c7;
}

.productos {
    display: flex;
    margin: 2rem;
    justify-content: center;
}

.productosgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    width: 30rem;
    height: 33rem;
    background: #EAE7DE;
    margin: 3rem;
}

.card img {
    background-position: center;
    background-size: conver;
    background-repeat: no-repeat;
    width: 100%;
    height: 20rem;
}

h1 {
    text-align: center;
    font-size: 8rem;
    color: #fff;
    margin-top: 30vh;
}

h2 {
    text-align: center;
    font-size: 2rem;
}

h3 {
    text-align: center;
    font-size: 1.5rem;
    margin: 0rem;
}

.compra {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

.agregar {
    margin: 0;
}

.agregar button {
    width: 5rem;
    border: none;
    align-items: center;
    background-color: #EAE7DE;
    cursor: pointer;
}

.agregar img {
    width: 2rem;
    height: 2rem;
    margin: 0;
}
.seleccion {
    display: flex;
    justify-content: center;
}

.seleccion input {
    border: none;
    background-color: #EAE7DE;
    width: 8rem;
    height: 2rem;
    font-size: 2rem;
    text-align: center;
}

.gridform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
}

.gridFactura {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2rem;
    justify-items: center;
}

select {
    border: none;
    background-color: #EAE7DE;
    width: 12rem;
    height: 2.5rem;
    font-size: 2rem;
    cursor: pointer;
}

option {
    background: #EAE7DE;
}

.total {
    font-size: 2rem;
}
<div class="contenedor">
        <div class="slider Posicionbtn productos">
            <div class="card">
                <div class="img">
                    <img src="img/cards/pexels-aphiwat-chuangchoem-437716.jpg" alt="">
                </div>
                <div class="footer-card">
                    <h2>Café Latte</h2>
                    <h3>Precio : $20</h3>
                </div>
            </div>
            <div class="card">
                <div class="img">
                    <img src="img/cards/hot-chocolate-1058197_1920.jpg" alt="">
                </div>
                <div class="footer-card">
                    <h2>Chocolate Caliente</h2>
                    <h3>Precio : $10</h3>

                </div>
            </div>
            <div class="card">
                <div class="img">
                    <img src="img/como-preparar-cafe-colombiano-758887.jpg" alt="">
                </div>
                <div class="footer-card">
                    <h2>Vanilla Latte</h2>
                    <h3>Precio : $80</h3>

                </div>
            </div>
            <div class="card">
                <div class="img">
                    <img src="img/cards/coffee-4648041_1920.jpg" alt="">
                </div>
                <div class="footer-card">
                    <h2>Helado Café Mocha</h2>
                    <h3>Precio : $60</h3>

                </div>
            </div>
        </div>
    </div>
    <div class="seleccion agregar gridform">
        <input type="text" name="cantidad" id="cantidad">
        <select name="Opcion" id="Opcion">
            <option data-precio="20" value="1">Café Latte</option>
            <option data-precio="10" value="2">Chocolate Caliente</option>
            <option data-precio="80" value="3">Vanilla Latte</option>
            <option data-precio="60" value="4">Helado Café Mocha</option>
        </select>
        <button type="button" id="enviar">
            <img src="img/icon/1485969929-12-plus_78898.svg" alt="">
        </button>
    </div>
    <div class="btns">
        <a href="" class="btn btn-color">Ver mas</a>
    </div>

4
  • Te recarga la pagina porque tienes un form con un button tipo submit. Si lo que quieres es usar Ajax no necesitas forma ni submit.
    – alanfcm
    Commented el 12 mar. 2021 a las 20:20
  • si ya gracias..
    – Fabio
    Commented el 12 mar. 2021 a las 20:29
  • Pulsa en editar y agrega como tienes ahora el código Javascript para verificarlo.
    – A. Cedano
    Commented el 14 mar. 2021 a las 9:14
  • ya lo actualice
    – Fabio
    Commented el 14 mar. 2021 a las 17:30

1 respuesta 1

2

Tu código Javascript es muy repetitivo, tiene algunos errores y malas prácticas.

Para evitar el bloque switch ... case con sendas llamadas a Ajax en cada case puedes trasladar esa lógica a un objeto tan simple como este:

let mData = {
  1: 20,
  2: 10,
  3: 80,
  4: 60
};

Como ves, ahí se asocia cada option (valor de la izquierda), a cada valor a multiplicar según el option (valor de la derecha). Esto, si usas HTML5, podría ponerse incluso como un atributo data- en cada option.

Luego, al mezclar Javascript puro con jQuery, te estabas confundiendo al intentar obtener valores con algo como value() (propio de jQuery) en código puro. Para evitar confusiones, en este caso he usado sintaxis jQuery en la obtención de valores.

Poner funciones in line es una mala práctica. Aquí asociamos un listener al evento change del select directamente en Javascript, prescindiendo de ese modo de la función in line.

Dado que lo único que realmente cambia es el valor a multiplicar, verás que he creado una variable postData, en la que metemos cada valor recuperado y para el valor a multplicar, lo obtenermos del objeto, según el option que se haya seleccionado y luego pasamos ese objeto en la petición Ajax.

Lo único diferente es que aquí, los nombres de clave del objeto son siempre los mismos, pero eso no es malo... todo lo contrario. En tu código original taaaaambién cambiabas eso. Significa que en el servidor taaammmbién tendrías que verificar si la clave se llama Nombre1 o Nombre2 o NombreN ... y así por cada clave, lo cual no es para nada práctico.

Espero te sirva, y si tienes alguna duda, pregunta en comentarios.

$(function() {
  /*Evitar funciones in line*/
  $("#Opcion").on('change', function() {
    /*Asociamos cada case a un valor*/
    let mData = {
      1: 20,
      2: 10,
      3: 80,
      4: 60
    };

    let opcion = $('option:selected', this).val();
    let valor = $('#cantidad').val();
    let Nombre = $('option:selected', this).text();

    let postData = {
      cantidad: valor,
      Nombre: Nombre,
      Total: valor * mData[opcion]
    };

    console.log(postData);

    $.ajax({
      url: '../php/procesos/ControlCarrito.php',
      method: 'post',
      dataType: 'json',
      data: postData
    }).done(function(info) {
      console.log(info)
    })

  });

});
.areaProductos {
    margin: 2rem;
    width: 100%;
    height: 50rem;
    background: #c7c7c7;
}

.productos {
    display: flex;
    margin: 2rem;
    justify-content: center;
}

.productosgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    width: 30rem;
    height: 33rem;
    background: #EAE7DE;
    margin: 3rem;
}

.card img {
    background-position: center;
    background-size: conver;
    background-repeat: no-repeat;
    width: 100%;
    height: 20rem;
}

h1 {
    text-align: center;
    font-size: 8rem;
    color: #fff;
    margin-top: 30vh;
}

h2 {
    text-align: center;
    font-size: 2rem;
}

h3 {
    text-align: center;
    font-size: 1.5rem;
    margin: 0rem;
}

.compra {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

.agregar {
    margin: 0;
}

.agregar button {
    width: 5rem;
    border: none;
    align-items: center;
    background-color: #EAE7DE;
    cursor: pointer;
}

.agregar img {
    width: 2rem;
    height: 2rem;
    margin: 0;
}
.seleccion {
    display: flex;
    justify-content: center;
}

.seleccion input {
    border: none;
    background-color: #EAE7DE;
    width: 8rem;
    height: 2rem;
    font-size: 2rem;
    text-align: center;
}

.gridform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
}

.gridFactura {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2rem;
    justify-items: center;
}

select {
    border: none;
    background-color: #EAE7DE;
    width: 12rem;
    height: 2.5rem;
    font-size: 2rem;
    cursor: pointer;
}

option {
    background: #EAE7DE;
}

.total {
    font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">
  <div class="slider Posicionbtn productos">
    <div class="card">
      <div class="img">
        <img src="img/cards/pexels-aphiwat-chuangchoem-437716.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Café Latte</h2>
        <h3>Precio : $20</h3>
      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/cards/hot-chocolate-1058197_1920.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Chocolate Caliente</h2>
        <h3>Precio : $10</h3>

      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/como-preparar-cafe-colombiano-758887.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Vanilla Latte</h2>
        <h3>Precio : $80</h3>

      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/cards/coffee-4648041_1920.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Helado Café Mocha</h2>
        <h3>Precio : $60</h3>

      </div>
    </div>
  </div>
</div>
<div class="seleccion">
  <form id="mform" action="" method="POST" class="agregar gridform">
    <input type="text" name="cantidad" id="cantidad">
    <select name="Opcion" id="Opcion">
      <option value="1">Café Latte</option>
      <option value="2">Chocolate Caliente</option>
      <option value="3">Vanilla Latte</option>
      <option value="4">Helado Café Mocha</option>
    </select>
    <button type="submit" name="submit" id="enviar">
                    <img src="img/icon/1485969929-12-plus_78898.svg" alt="">
                </button>
  </form>
</div>
<div class="btns">
  <a href="" class="btn btn-color">Ver mas</a>
</div>


Veamos un ejemplo basado en atributos data (HTML 5+).

Aquí simplemente agregamos el precio en un atributo data-precio en cada option, quedando así:

    <select name="Opcion" id="Opcion">
      <option data-precio="20" value="1">Café Latte</option>
      <option data-precio="10" value="2">Chocolate Caliente</option>
      <option data-precio="80" value="3">Vanilla Latte</option>
      <option data-precio="60" value="4">Helado Café Mocha</option>
    </select>

Gracias a eso, podremos ahorrarnos el switch ... case inicial y también el objeto mData, pudiendo acceder al valor con algo como mSelect.data('precio') (estilo jQuery):

$(function() {
  /*Evitar funciones in line*/
  $('#Opcion').on('change', function() {
    /*Referencia al option seleccionado*/
    let mSelect=$('option:selected', this);
    let opcion = mSelect.val();
    let Nombre = mSelect.text();
    let valor = $('#cantidad').val();
    
    let postData = {
      cantidad: valor,
      Nombre: Nombre,
      Total: valor * mSelect.data('precio')
    };

    console.log(postData);

    $.ajax({
      url: '../php/procesos/ControlCarrito.php',
      method: 'post',
      dataType: 'json',
      data: postData
    }).done(function(info) {
      console.log(info)
    })

  });

});
.areaProductos {
    margin: 2rem;
    width: 100%;
    height: 50rem;
    background: #c7c7c7;
}

.productos {
    display: flex;
    margin: 2rem;
    justify-content: center;
}

.productosgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    width: 30rem;
    height: 33rem;
    background: #EAE7DE;
    margin: 3rem;
}

.card img {
    background-position: center;
    background-size: conver;
    background-repeat: no-repeat;
    width: 100%;
    height: 20rem;
}

h1 {
    text-align: center;
    font-size: 8rem;
    color: #fff;
    margin-top: 30vh;
}

h2 {
    text-align: center;
    font-size: 2rem;
}

h3 {
    text-align: center;
    font-size: 1.5rem;
    margin: 0rem;
}

.compra {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

.agregar {
    margin: 0;
}

.agregar button {
    width: 5rem;
    border: none;
    align-items: center;
    background-color: #EAE7DE;
    cursor: pointer;
}

.agregar img {
    width: 2rem;
    height: 2rem;
    margin: 0;
}
.seleccion {
    display: flex;
    justify-content: center;
}

.seleccion input {
    border: none;
    background-color: #EAE7DE;
    width: 8rem;
    height: 2rem;
    font-size: 2rem;
    text-align: center;
}

.gridform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
}

.gridFactura {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2rem;
    justify-items: center;
}

select {
    border: none;
    background-color: #EAE7DE;
    width: 12rem;
    height: 2.5rem;
    font-size: 2rem;
    cursor: pointer;
}

option {
    background: #EAE7DE;
}

.total {
    font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">
  <div class="slider Posicionbtn productos">
    <div class="card">
      <div class="img">
        <img src="img/cards/pexels-aphiwat-chuangchoem-437716.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Café Latte</h2>
        <h3>Precio : $20</h3>
      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/cards/hot-chocolate-1058197_1920.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Chocolate Caliente</h2>
        <h3>Precio : $10</h3>

      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/como-preparar-cafe-colombiano-758887.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Vanilla Latte</h2>
        <h3>Precio : $80</h3>

      </div>
    </div>
    <div class="card">
      <div class="img">
        <img src="img/cards/coffee-4648041_1920.jpg" alt="">
      </div>
      <div class="footer-card">
        <h2>Helado Café Mocha</h2>
        <h3>Precio : $60</h3>

      </div>
    </div>
  </div>
</div>
<div class="seleccion">
  <form id="mform" action="" method="POST" class="agregar gridform">
    <input type="text" name="cantidad" id="cantidad">
    <select name="Opcion" id="Opcion">
      <option data-precio="20" value="1">Café Latte</option>
      <option data-precio="10" value="2">Chocolate Caliente</option>
      <option data-precio="80" value="3">Vanilla Latte</option>
      <option data-precio="60" value="4">Helado Café Mocha</option>
    </select>
    <button type="submit" name="submit" id="enviar">
                    <img src="img/icon/1485969929-12-plus_78898.svg" alt="">
                </button>
  </form>
</div>
<div class="btns">
  <a href="" class="btn btn-color">Ver mas</a>
</div>

5
  • HAA ok , si sabia que era lo que hacia era una mala practica pero pues así me lo pedían intentare. con las opciones que mediste gracias.
    – Fabio
    Commented el 13 mar. 2021 a las 18:03
  • si quiero mandar el valor del mData tendria que poner algo asi: let postData = { Nombre: Nombre, cantidad: valor, Precio:mData[opcion], Total: valor * mData[opcion], };
    – Fabio
    Commented el 13 mar. 2021 a las 18:37
  • si me funciono solo que ahora no manda los datos al archivo de php
    – Fabio
    Commented el 13 mar. 2021 a las 21:09
  • ¿Sigue sin mandar los datos @BryanRL?
    – A. Cedano
    Commented el 13 mar. 2021 a las 22:42
  • sip intente poner un alert antes de invocar a ajax y lo hace pero si lo pongo dentro de ajax despues del .done no sale el alert al parecer no entrar a ajax
    – Fabio
    Commented el 14 mar. 2021 a las 2:21

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.