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>
<p id="results"></p>
</div>
<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>
<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>