2

Tengo un formulario que contiene varias checkbox con distintos valores. Necesito que al darle a enviar en el formulario, los checkboxes que han sido checkeados se guarden en la base de datos que utilizo con phpMyAdmin.

Este es mi html:

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
        <div class="form">
<form method="POST" id="formulario" name="formulario" role="form">
              <div class="row">
                <div class="col-md-12">
                  <div class="col-md-6">
                    <br><br>
                    <br><label for="nombre">Su nombre</label>
                    <input type="text" name="nombre" placeholder="Nombre" required class="form-control">
                  </div>
                  <div class="col-md-6">
                    <a title="Logytel" href="http://logytel.es"><img class="logytel" src="https://i2.wp.com/logytel.es/wp-content/uploads/2018/06/cropped-LOGO_Logytel_2012_R_485C_24x10_8_Blanco.png" alt="Logytel" /></a>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="col-md-2">
                    <br><label class="container">Uno
                        <input type="checkbox" name="checks" value="1"> <br>
                        <span class="checkmark"></span>

                    </label>
                    <label class="container">Dos
                        <input type="checkbox" name="checks" value="2"> <br>
                        <span class="checkmark"></span>
                    </label>
                    <label class="container">Tres
                        <input type="checkbox" name="checks" value="3"> <br>
                        <span class="checkmark"></span>
                    </label>
                  </div>
          <div class="col-md-2">
                    <br><label class="container">Cuatro
                        <input type="checkbox" name="checks" value="4"> <br>
                        <span class="checkmark"></span>

                    </label>
                    <label class="container">Cinco
                        <input type="checkbox" name="checks" value="5"> <br>
                        <span class="checkmark"></span>
                    </label>
                    <label class="container">Seis
                        <input type="checkbox" name="checks" value="6"> <br>
                        <span class="checkmark"></span>
                    </label>
                  </div>
                  <div class="col-md-4">
                    <br><div class="custom-select" style="width:200px;">
                      <select>
                        <option name="selects" value="0">Elige uno:</option>
                        <option name="selects" value="1">Uno</option>
                        <option name="selects" value="2">Dos</option>
                        <option name="selects" value="3">Tres</option>
                      </select>
                    </div>
        </div>
          <div class="col-md-4">
                    <br><div class="custom-select" style="width:200px;">
                      <select>
                        <option name="selects" value="0">Elige uno:</option>
                        <option name="selects" value="1">Uno</option>
                        <option name="selects" value="2">Dos</option>
                        <option name="selects" value="3">Tres</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
          <div class="row">
                <div class="col-md-12">
            <div class="col-md-6">
                    <br><div class="custom-select" style="width:400px; float:left;">
                      <select>
                        <option name="selects" value="0">Elige uno:</option>
                        <option name="selects" value="1">Uno</option>
                        <option name="selects" value="2">Dos</option>
                        <option name="selects" value="3">Tres</option>
                      </select>
                    </div>
        </div>
            <div class="col-md-6">
                    <br><div class="custom-select" style="width:400px; float:left;">
                      <select>
                        <option name="selects" value="0">Elige uno:</option>
                        <option name="selects" value="1">Uno</option>
                        <option name="selects" value="2">Dos</option>
                        <option name="selects" value="3">Tres</option>
                      </select>
                    </div>
        </div>
        </div>
          </div>
                <br><br>

                <button id="myBtn" class="button" input type="submit" value="Enviar" name="resultado">Enviar</button>

</form>

        <!-- The Modal -->
        <div id="mymodal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <p id="resultado"> Tus datos han sido guardados correctamente.</p>
          </div>
        </div>
        <script>
            $('#formulario').submit(function(event) {
            // Obtenemos todos los datos
                var parametros = $(this).serialize();
                $.ajax({
            // Lo enviamos mediante POST
                type: "POST",
            // A la URL
                url: "guardar.php",
            // Le pasamos los datos del formulario
                data: parametros,
                success: function(data) {
        // Abrimos el modal
                $("#mymodal").modal("show");
            // Mostramos el resultado de la URL
                $('#resultado').html(data);
            // Reseteamos el formulario
                document.getElementById("formulario").reset();
            }
        $("#mymodal").modal("hide");
            });


        // Prevenimos que el botón submit recargue la página
            event.preventDefault();
        });
            </script>

        <script>
            var x, i, j, selElmnt, a, b, c;
            /*look for any elements with the class "custom-select":*/
            x = document.getElementsByClassName("custom-select");
            for (i = 0; i < x.length; i++) {
            selElmnt = x[i].getElementsByTagName("select")[0];
            /*for each element, create a new DIV that will act as the selected item:*/
            a = document.createElement("DIV");
            a.setAttribute("class", "select-selected");
            a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
            x[i].appendChild(a);
            /*for each element, create a new DIV that will contain the option list:*/
            b = document.createElement("DIV");
            b.setAttribute("class", "select-items select-hide");
            for (j = 1; j < selElmnt.length; j++) {
                /*for each option in the original select element,
                create a new DIV that will act as an option item:*/
                c = document.createElement("DIV");
                c.innerHTML = selElmnt.options[j].innerHTML;
                c.addEventListener("click", function(e) {
                    /*when an item is clicked, update the original select box,
                    and the selected item:*/
                    var y, i, k, s, h;
                    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                    h = this.parentNode.previousSibling;
                for (i = 0; i < s.length; i++) {
                    if (s.options[i].innerHTML == this.innerHTML) {
                        s.selectedIndex = i;
                            h.innerHTML = this.innerHTML;
                            y = this.parentNode.getElementsByClassName("same-as-selected");
                            for (k = 0; k < y.length; k++) {
                            y[k].removeAttribute("class");
                            }
                                this.setAttribute("class", "same-as-selected");
                                break;
                            }
                        }
                    h.click();
                    });
                b.appendChild(c);
            }
            x[i].appendChild(b);
            a.addEventListener("click", function(e) {
                /*when the select box is clicked, close any other select boxes,
                and open/close the current select box:*/
                e.stopPropagation();
                closeAllSelect(this);
                this.nextSibling.classList.toggle("select-hide");
                this.classList.toggle("select-arrow-active");
                });
            }
            function closeAllSelect(elmnt) {
            /*a function that will close all select boxes in the document,
            except the current select box:*/
            var x, y, i, arrNo = [];
            x = document.getElementsByClassName("select-items");
            y = document.getElementsByClassName("select-selected");
            for (i = 0; i < y.length; i++) {
                    if (elmnt == y[i]) {
                    arrNo.push(i)
                    } else {
                    y[i].classList.remove("select-arrow-active");
                    }
            }
            for (i = 0; i < x.length; i++) {
                if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
                }
            }
        }
        /*if the user clicks anywhere outside the select box,
        then close all select boxes:*/
        document.addEventListener("click", closeAllSelect);
        </script>

Este el PHP que guarda los datos enviados del formulario:

<?php
    //conectamos Con el servidor
    $host="localhost";
    $user="root";
    $pass="";
    $db="prueba";

    $con = mysqli_connect($host,$user,$pass,$db) or die ("Problemas al conectar");
    mysqli_select_db($con,$db) or die ("Problemas al conectar con la base de datos");

    //recuperar las variables
    $nombre=$_POST['nombre'];
    $checks=$_POST['checks'];

    //Hacer secuencia sql
    $sql="INSERT INTO datos (nombre, checks) VALUES ('{$nombre}','{$checks}')";

    //ejecutamos la sentencia de sql
    $ejecutar=mysqli_query($con,$sql);

    //verificamos la ejecucion
    if(!$ejecutar){

        echo"Hubo Algun Error {msqli_error($conn)}";

    }else{
        echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";
    }
?>

Y este el php que muestra los datos en la tabla de la bd

<?php 

    //hacemos la conexion para la base de datos:
    $con= mysqli_connect('localhost','root','');

    //verificamos la conexion
    if(!$con){

        echo"No Se Encontro El Servidor";

    }else{

        $db= mysqli_select_db('prueba'); //nombre bbdd
    //verificamos la base de datos
        if(!$db){

            echo"No Se Encontro La Base De Datos";

        }
    }
    //Se Hace la sentencia sql:
    $sql="SELECT * FROM datos"; //nombre tabla

    //ejecutamos la sentencia de slq:
    $ejecutar=mysqli_query($sql);

    //traemos todos los valores en un array:
    $datos=mysqli_fetch_array($ejecutar);

    //imprimimos los datos de manera dinamica
    echo "<table border='1'>";
    echo"<tr>";
    echo "<th align='center'><b>Nombre</th>";
    echo "<th align='center'><b>Checks</th>";
    echo"</tr>";
    for($i=0; $i<$datos; $i++){
        echo"<tr><td>$datos[0]</td>";
        echo"<td>$datos[1]</td>";
        echo"<td>$datos[2]</td>";
        echo"</tr>";
        $datos=mysqli_fetch_array($ejecutar);
    }
    echo"</table>";
?>

He estado buscando por dintintas páginas, probando códigos y nada. En este ejemplo hay uno de ellos metido, no sé si lo formulé mal, si llevaba comas o si no, igual lo probé y tampoco funcionaba, y aparte, antes me registraba los datos del nombre que era lo único que tenía, funcionaba bien, vale, pero cuando metí los checkbox, dejó de funcionar y ahora no me registra nada. Así que algo tiene que estar fallando y no encuentro el qué es.

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Pikoh
    Commented el 22 nov. 2019 a las 13:01

1 respuesta 1

3

En el código Javascript tienes el hide fuera de bloque, lo cual producirá error. Ese bloque podría quedar así:

    <script>
        $('#formulario').submit(function(event) {
        // Obtenemos todos los datos
            var parametros = $(this).serialize();
            $.ajax({
        // Lo enviamos mediante POST
            type: "POST",
        // A la URL
            url: "guardar.php",
        // Le pasamos los datos del formulario
            data: parametros,
            success: function(data) {
    // Abrimos el modal
            $("#mymodal").modal("show");
        // Mostramos el resultado de la URL
            $('#resultado').html(data);
        // Reseteamos el formulario
            document.getElementById("formulario").reset();
            $("#mymodal").modal("hide");

        }
        });

    // Prevenimos que el botón submit recargue la página
        event.preventDefault();
    });
        </script>

Además no estás usando el formulario para serializar los elementos, porque ahí this representa el botón, no el formulario. deberías crear la variable parametros así:

            var parametros = $("#formulario").serialize();

En cuanto al código PHP, le falta algunos controles y hay cosas de más.

Prueba el código de esta manera. Si hay algún error lo dirá:

<?php
    //conectamos Con el servidor
    $host="localhost";
    $user="root";
    $pass="";
    $db="prueba";

    $con = mysqli_connect($host,$user,$pass,$db) or die ("Problemas al conectar");

    //recuperar las variables
    $nombre=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;
    $checks=!empty($_POST['checks']) ? $_POST['checks'] : NULL;

    if ($nombre && $checks) {
        //Hacer secuencia sql
        $sql="INSERT INTO datos (nombre, checks) VALUES ('{$nombre}','{$checks}')";

        //ejecutamos la sentencia de sql y verificamos al mismo tiempo
        if ( $ejecutar=mysqli_query($con,$sql) ) {
            $msg="Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";
        }else{
            $msg="Hubo Algun Error {msyqli_error($con)}";
        }
    }else{
        $msg="No se mandaron los datos desde el formulario";
    }
    echo $msg;
?>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.