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">×</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.