Skip to main content
etiquetas editadas
Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61
Aviso eliminado Mejorar los detalles por user101604
Recompensa finalizada con Triby's answer elegida por ComunidadBot
Aviso añadido Mejorar los detalles por user101604
Recompensa iniciada por un valor de 50 de reputación por ComunidadBot
se añadieron 342 caracteres en el cuerpo
Origen Enlace
user101604
user101604

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 palabra array.

NOTA: Los iten no seleccionados deberian guardarse con valor 0, algo que no se logra

ACTUALIZADO 3

ACTUALIZADO

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 palabra array.

NOTA: Los iten no seleccionados deberian guardarse con valor 0, algo que no se logra

ACTUALIZADO 3

se añadieron 612 caracteres en el cuerpo
Origen Enlace
user101604
user101604

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>

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>

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>
se eliminaron 597 caracteres en el cuerpo
Origen Enlace
user101604
user101604
Loading
cuerpo editado
Origen Enlace
user101604
user101604
Loading
Origen Enlace
user101604
user101604
Loading