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é Lattey 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>
form
con un button tiposubmit
. Si lo que quieres es usar Ajax no necesitas forma nisubmit
.