Estoy trarando de ingresar los presupuestos dentro de una base de datos pero tengo un error cuando eleigo entre una opcion y otra.
Intente hacerlo con un array
pero guardaba todo dentro de una misma fila y no eso lo que estoy buscando y no se me ocurre como solucionarlo. Dejo el codigo completo para que me orienten y agradezco de antemano.
ACTUALIZADO 2
Error 1: Los datos no pueden ingresar a la base de datos si no eligo todas las opciones.
Error 2: Al usar
array
ingresa solo los datos nombre, email y total. Las otras casillas ingresa la palabraarray
.NOTA: Los iten no seleccionados deberian guardarse con valor
0
, algo que no se logra
ACTUALIZADO 3
Modificando el script de PHP, logro insertear el total, nombre, el mail pero despues me guarda la palabra Array
en las otras casillas.
if(isset($_POST['add'])){
if(!empty($_POST['nombre']) && !empty($_POST['email'])){
$add = $conn->prepare("INSERT INTO presupuesto (nombre, email, total, bsimple, todo, frenos, aros) VALUES (:nombre, :email, :total, :bsimple, :todo, :frenos, :aros)");
$add->bindValue(':nombre', $_POST['nombre']);
$add->bindValue(':email', $_POST['email']);
$add->bindValue(':total', $_POST['total']);
$add->bindValue(':bsimple', $_POST['check_list']);
$add->bindValue(':todo', $_POST['check_list']);
$add->bindValue(':frenos', $_POST['check_list']);
$add->bindValue(':aros', $_POST['check_list']);
$add->execute();
echo '<div class="mb-3 badge badge-success">Presupuesto creado</div>';
} else {
echo '<div class="mb-3 badge badge-danger">Error</div>';
}
}
function actualizarValor(estaChequeado, valor) {
var suma_actual = 0;
var campo_resultado = document.getElementById('txtValor');
valor = parseInt(valor);
try {
if (campo_resultado != null) {
if (isNaN(campo_resultado.value)) {
campo_resultado.value = 0;
}
suma_actual = parseInt(campo_resultado.value);
}
} catch (ex) {
alert('No existe el campo de la suma.');
}
if (estaChequeado == true) {
suma_actual = suma_actual + valor;
$(this).closest("label").css('border', '3px solid black');
} else {
suma_actual = suma_actual - valor;
$(this).closest("label").css('border', '3px solid transparent');
}
campo_resultado.value = suma_actual;
}
.checkeable img {
width: 100px;
border: 5px solid transparent;
}
.checkeable input {
display: none;
}
.checkeable input:checked + img {
border-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Presupuesto</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<h2>Mi Bicicleta</h2>
<div style="padding-top: 1rem;">
<p>Presupuesto</p>
<span style="font-size: 1.4rem;">U$S</span>
<input type="text" name="total" style="font-size: 1.4rem; padding: .4rem; border: none;" readonly id="txtValor" value="0">
</div>
<div class="pt-4">
<label class="checkeable">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" name="simple" value="60" onclick="actualizarValor(this.checked, this.value);"> Bicicleta Simple $60
</label>
<label class="checkeable ml-3">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" name="todo" value="86" onclick="actualizarValor(this.checked, this.value);"> Todo Terreno $86
</label>
</div>
<div class="pt-4">
<h4>Como quieres armar tu bicicleta?</h4>
<p>
<input type="checkbox" name="frenoapb" value="180" onclick="actualizarValor(this.checked, this.value);"> Frenos APB - $180
</p>
<p>
<input type="checkbox" name="aros" value="82" onclick="actualizarValor(this.checked, this.value);"> Aros de aluminio - $82
</p>
<p>
<input type="text" name="nombre" > Nombre
</p>
<p>
<input type="text" name="email"> Email
</p>
<button name="add" class="btn btn-primary">Crear Presupuesto</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
onclick
de cada checkbox una funciónactualizarValor()
Luego, la lógica en esa función es confusa. ¿Por qué no recoges todos los elementos del formulario simplemente con algo como serialize (en ese caso los checkbox que no estén seleccionados no se recogerán) y envías esos datos? Y, si debe elegirse una sola opción entre varias, lo propio sería un radio, no un checkbox.isset()
y si no poner un valor por default.