4

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

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>

16
  • 1
    Cual es el error?
    – alanfcm
    Commented el 17 ene. 2020 a las 17:12
  • 1
    Es que no me deja ingresar los datos sin haber elegido todos los checkbox. Si eligo una opcion, no me deja ingresarlos datos, es como que tengo que elegir todo y no es lo correcto, tiene que ser o una bicibleta simple o todo terreno
    – user101604
    Commented el 17 ene. 2020 a las 17:13
  • 1
    hola, cuál es el comportamiento deseado en base a todo lo que ya tienes hecho? no entiendo muy bien Commented el 17 ene. 2020 a las 17:45
  • 2
    Uno de los problemas principales en tu código es que usas funciones in line, lo cual es una mala práctica. Me refiero a que pones en el onclick de cada checkbox una función actualizarValor() 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.
    – A. Cedano
    Commented el 17 ene. 2020 a las 17:51
  • 1
    El problema es que los checkbox no se agregan a POST si no estan seleccionados. Necesitas chequear si el valor esta presente en POST con isset() y si no poner un valor por default.
    – alanfcm
    Commented el 17 ene. 2020 a las 18:00

3 respuestas 3

7
+50

Los input checkbox se envían solo si la casilla está marcada, por lo que debes verificar que realmente se recibieron en PHP. Lo más fácil es con asignación ternaria:

(sentencia booleana) ? valor si la sentencia es cierta : valor si es falsa

// Con un if usarías:
if(isset($_POST['algo']) {
    $variable = $_POST['algo'];
} else {
    $variable = 0;
}

// Con asignación ternaria:
$variable = ($_POST['algo']) ? $_POST['algo'] : 0;

Funciona igual con echo, asignar parámetros, incluir como valor de array, etc.

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']);
        // Con asignación ternaria revisas que el checkbox fue marcado
        $add->bindValue(':bsimple', (isset($_POST['bsimple']) ? $_POST['bsimple'] : 0);
        $add->bindValue(':todo', (isset($_POST['todo']) ? $_POST['todo'] : 0);
        $add->bindValue(':frenos', (isset($_POST['frenos']) ? $_POST['frenos'] : 0);
        $add->bindValue(':aros', (isset($_POST['aros']) ? $_POST['aros'] : 0);
        $add->execute();
        echo '<div class="mb-3 badge badge-success">Presupuesto creado</div>';
    } else {
        echo '<div class="mb-3 badge badge-danger">Error</div>';
    }
}

En el HTML coloca los nombres igual que los campos de tu tabla:

<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="bsimple" 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="frenos" 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>
6

Te mostraré una solución aplicando lo que te sugerí en varios comentarios.

HTML

Evitaremos las funciones in line, porque son una mala práctica debido a que arrastran en el HTML código Javascript. Si mañana hay que cambiar algo en esa función tendrás que buscar todos los HTML que la tengan y modificarlos.

Aquí lo que haremos será escuchar el envío del formulario, recogeremos sus datos con serialize y en el servidor verificaremos qué datos se mandaron y qué datos no.

Otra cosa que deberías evitar es el uso de $_SERVER['PHP_SELF'], pues en algunos contextos puede ser un problema de seguridad. No nos detendremos en eso ahora, pero si quieres luego te paso un enlace a una pregunta que ahora no recuerdo. En su lugar vamos a poner el nombre del archivo que procesará la información que pases al servidor, y que debe ser otro distinto del archivo que contiene el formulario. Aquí he llamado a ese archivo form-action.php y he supuesto que se encuentra en el mismo directorio que el script que contiene el formulario.

Hemos agregado también un <div id="result"> para mostrar el resultado de la petición Ajax. Esto es opcional y depende de tu contexto.

Bueno, este es el HTML.

<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="form-action.php" 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" /> 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" /> Todo Terreno $86
</label>

</div>

<div class="pt-4">
<h4>Como quieres armar tu bicicleta?</h4>
<p>
<input type="checkbox" name="frenoapb" value="180" /> Frenos APB - $180
</p>
<p>
<input type="checkbox" name="aros" value="82" /> 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>

<div id="result"></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>

Javacript

Este sería el código JS que estaría en el mismo archivo que el HTML y que recogería los datos y los enviaría al servidos vía Ajax. Este bloque completo lo puedes poner dentro de la etiqueta head del HTML anterior.

$(function() {
    $( "form" ).on( "submit", function( event ) { 
        event.preventDefault(); 
        /* 
            *Dado que $( this ) hace referencia al formulario
            *Lo usaremos para serialize, y también para determinar
            *a qué URL debe dirigirse la petición
            *y cuál es su método, mediante prop
        */
        var mData=$( this ).serialize(); 
        var request = $.ajax({
            url: $( this ).prop('action'),
            method: $( this ).prop('method'),
            data: mData,
            dataType: "html"
        });

        request.done(function(msg) {
            console.log(msg);
            $('#result').html(msg);
        });

        request.fail(function(jqXHR, textStatus) {
            alert(`La petición falló ${textStatus}`);
        });

    }); 

});

PHP

Ahora en PHP vamos a usar ternarios para determinar qué valores llegaron en la petición. Dado que los checkbox que no se seleccionaron no van a viajar entre los datos que se manden, mediante un ternario podremos asignar el valor por defecto que es 0, según dices en la pregunta, cuando esos datos no hayan sido seleccionados.

NOTA: Este archivo debe llamarse form-action.php o el nombre que sea, pero deber ser igual que lo que hayas escrito en la etiqueta action del formulario.

$nombre=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;
$email= !empty($_POST['email'])  ? $_POST['email']  : NULL;
if ($nombre && $email) {
    #Aquí los ternarios asignarán 0 cuando alguno de los checkbox no se haya marcado
    $total=!empty($_POST['total']) ? $_POST['total'] : 0;
    $bsimple=!empty($_POST['simple']) ? $_POST['simple'] : 0;
    $todo=!empty($_POST['todo']) ? $_POST['todo'] : 0;
    $frenos=!empty($_POST['frenoapb']) ? $_POST['frenoapb'] : 0;
    $aros=!empty($_POST['aros']) ? $_POST['aros'] : 0;
    $add = $conn->prepare("INSERT INTO presupuesto (nombre, email, total, bsimple, todo, frenos, aros) VALUES (:nombre, :email, :total, :bsimple, :todo, :frenos, :aros)");
    $add->bindValue(':nombre', $nombre);
    $add->bindValue(':email', $email);
    $add->bindValue(':total', $total);
    $add->bindValue(':bsimple', $bsimple);
    $add->bindValue(':todo', $todo);
    $add->bindValue(':frenos', $frenos);
    $add->bindValue(':aros', $aros);
    #Hay que controlar un posible fallo del execute
    #para no poner tantos echo usaremos variables de estado
    if ( $add->execute() ) {
        $type="success";
        $msg="Presupuesto creado";
    } else {
        $type="danger";
        $msg="Error ejecutando la consulta. Posible clave duplicada.";
    }
} else {
        $type="danger";
        $msg="Error. Hay datos vacíos en el post.";
}
echo "<div class=\"mb-3 badge badge-$type\">$msg</div>";

Eso es todo. Prueba esto y si tienes algún problema hazlo saber en comentarios.

4

Una solución para tu problema es validar con isset() si el valor existe, si no, agregar uno por defecto, luego agregar a cada input un nombre distinto y crear inputs ocultos para guardar los valores reales a procesar.

Puedes pegar esta función en tu código php, úsala para obtener tus valores.

 // valida que el input exista si no existe o esta vació retorna el valor $por_defecto
 function getPOST($el_input, $por_defecto= 0) {
     return isset($_POST[$el_input]) ? ( $_POST[el_input] != "" ? $_POST[el_input]  : $por_defecto)  : $por_defecto;
}

 $total = getPOST("total");
 $bsimple = getPOST("bsimple");
 $todo = getPOST("todo");
 $frenos = getPOST("frenos",0.00); // si no existe $frenos igual a 0.00
 $aros = getPOST("aros", 0 ); // si no existe $aros igual a 0
 $nombre= getPOST("nombre","sin nombre");

1. Ya que tu tabla requiere nombre, email, total, bsimple, todo, frenos, aros creo esos input con el atributo type=text.

2. Luego para saber el tipo de bicicleta creo un par de inputs con name=tipo y de type=radio esto permite enviar el tipo y a los input de nombre bsimple y todo agrego hidden para ocultarlos y así estos siempre serán enviados por formulario.

3. Cambia los valores según la selección usado el id para saber que input cambiar y el evento onclick ( cuando se da click en la opción visible para bsimple cambia bsimple a 65 y todo a 0 y viceversa )

<li>Total:<input name="total" disabled requiered></li>
<li><label>
  <input id="bsimple" name="bsimple" hidden>
  <input name="tipo" type="radio"     onclick="bsimple.value=65;todo.value=0;"> Simple
<label>
<label>
  <input id="todo" name="todo" hidden>
  <input name="tipo" type="radio"     onclick="bsimple.value=0;todo.value=65;"> Todo
<label>
</li>
<li>Frenos:<input name="frenos" value="50" type="checkbox"></li>
<li>Aros:<input name="aros"  value="60" type="checkbox"></li>
<li>Nombre:<input name="nombre" requiered></li>
<li>Email: <input name="email" requiered></li>

Por ultimo en tu código PHP recuerda pegar la función de arriba.

CHECKBOX Y RADIO :

Primero debes recordar que los inputs de tipo checkbox solo se envían por POST o GET cuando han sido seleccionados, para saber si algo llega por formulario debes usar la funcion isset($_POST["tudato"]) una buena manera de verificar que llego a tu petición es asiendo un echo del $_POST.

echo json_encode($_POST);

Si tiene esto en tu formulario.

<input type="checkbox" name="foo" value="banana">
<input type="radio" name="bar" value="1">
<input type="radio" name="bar" value="2">

como te das cuenta ninguno de estos esta seleccionado, no tiene checked entonces la estructura de $_POST seria [] un array vació por lo tanto isset($_POST["foo"]) y isset($_POST["bar"]) seria false para ambos casos, pero si es este otro caso.

<input type="checkbox" name="foo" value="banana" checked>
<input type="radio" name="bar" value="1">
<input type="radio" name="bar" value="2" checked>

la estructura de $_POST seria [ foo=banana , bar=1 ], ya son accesibles y asset[$_POST["foo"]] y asset[$_POST["foo"]] daría true.

si estas usando los checkobox para la lógica de tu formulario, debes complementar con otro elemento de html que son los input de tipo radio.

  • type="checkbox" es un input usado para enviar un valor solo si este es seleccionado.
  • type="radio" es un input usado para enviar solo un valor de varias opciones a seleccionar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.