Well the truth is how to do it, but if I use the value attribute. The problem is that for another function of a form, I use the value, and I can not use the same value of the value. What I want is that when the client clicks on the checkbox, the text of this checkbox is saved in a database
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<title>formulario</title>
<link rel ="stylesheet" type ="text/css" href="estilos.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function(){
$("input[type=radio]").add("input[type=checkbox]").on("click", function(){
calcular();
})
});
function calcular(){
$radios = $("input[type=radio]:checked");
$checkboxs = $("input[type=checkbox]:checked");
var coste_total = 0;
$checkboxs.each(function(){
coste_total = coste_total + parseInt($(this).val());
})
$radios.each(function(){
coste_total = coste_total + parseInt($(this).val());
})
$(".resultado").html(coste_total)
}
</script>
<body>
<div clas="wrap">
<form action="insert.php" class="formulario" method="POST">
<br>
<p>BOOKS</p>
<div class="checkbox">
<br>
<input type="checkbox" value="20" id="CourseBooks" class="get_value" value="CourseBooks" style="display: none;">
<label for="CourseBooks">CourseBooks</label>
<input type="checkbox" value="20" id="PracticeBooks" class="get_value" value="PracticeBooks" style="display: none;">
<label for="PracticeBooks">PracticeBooks</label>
<br>
</div>
<br>
<p>CONCRETS</p>
<div class="radio">
<input value ="8" type="radio" id="All Suggested" value="first_radio" style="display: none;" required>
<label for="All Suggested">All Suggested</label>
<input value="4" type="radio" id="Some Suggested" value="second_radio" style="display: none;" required>
<label for="Some Suggested">Some Suggested</label>
<input value="0" type="radio" id="None Suggested" value="third_radio" style="display: none;" required>
<label for="None Suggested">None Suggested</label>
<br>
</div>
<br>
<div class="text">
<p>TEACHERS</p>
<label for="Number of Teachers">Number of Teachers</label>
<input type="number" name="Number of Teachers" placeholder="number" required>
<br>
<label for="Number of Trained Teachers">Number of Trained Teachers</label>
<input type="number" name="Number of Trained Teachers" placeholder="number" required>
<br>
</div>
<br>
<p>TRAININGS</p>
<div class="radio">
<input value="4" type="radio" id="Module 1: Foundatons" style="display: none;" required>
<label for="Module 1: Foundatons">Module 1: Foundatons</label>
<br>
<input value="2" type="radio" id="Module 2: Questioning" style="display: none;" required>
<label for="Module 2: Questioning">Module 2: Questioning</label>
<br>
<input value="2" type="radio" id="Module 3: Smart Environments" style="display: none;" required>
<label for="Module 3: Smart Environments">Module 3: Smart Environments</label>
<br>
<input value="2" type="radio" id="Module 4: Differentiation" style="display: none;" required>
<label for="Module 4: Differentiation">Module 4: Differentiation</label>
<br>
<input value="2" type="radio" id="Module 5: Innovation" style="display: none;" required>
<label for="Module 5: Innovation">Module 5: Innovation</label>
<br>
</div>
<br>
<P>CURRICULUM</P>
<br>
<div class="radio">
<p>Line Up</p>
<br>
<input value="4" type="radio" id="90%-100%" style="display: none;" required>
<label for="90%-100%">90% - 100%</label>
<br>
<input value="3" type="radio" id="80%-89%" style="display: none;" required>
<label for="80%-89%">80% - 89%</label>
<br>
<input value="2" type="radio" id="70%-79%" style="display: none;" required>
<label for="70%-79%">70% - 79%</label>
<br>
<input value="1" type="radio" id="Less than 70%" style="display: none;" required>
<label for="Less than 70%">Less than 70%</label>
<br>
</div>
<br>
<p>CLASS OBSERVATIONS</p>
<div class="radio">
<br>
<input value="1" type="radio" id="One Routine" style="display: none;" >
<label for="One Routine">One Routine</label>
<br>
<input value="2" type="radio" id="Two Routines" style="display: none;" >
<label for="Two Routines">Two Routines</label>
<br>
<input value="3" type="radio" id="Three Routines" style="display: none;">
<label for="Three Routines">Three Routines</label>
<br>
<input value="4" type="radio" id="Four Routines" style="display: none;">
<label for="Four Routines">Four Routines</label>
<br>
<input value="5" type="radio" id="Five Routines" style="display: none;">
<label for="Five Routines">Five Routines</label>
<br>
<input value="6" type="radio" id="Six Routines" style="display: none;">
<label for="Six Routines">Six Routines</label>
<br>
<input value="7" type="radio" id="Seven Routines" style="display: none;">
<label for="Seven Routines">Seven Routines</label>
<br>
<input value="8" type="radio" id="Eight Routines" style="display: none;">
<label for="Eight Routines">Eight Routines</label>
<br>
</div>
<br>
<p>INTERVENTIONS</p>
<div class="checkbox">
<br>
<input value="8" type="checkbox" id="Still learning Students protocolo" value="Still learning Students protocolo" name="checkboxs[]" style="display: none;">
<label for="Still learning Students protocolo">Still learning Students protocolo</label>
<br>
</div>
<br>
<p>TESTING</p>
<div class="checkbox">
<p>Pre-post testing</p>
<br>
<input value="2" type="checkbox" id="One Grade" name="checkboxs[]" value="One Grade" style="display: none;" >
<label for="One Grade">One Grade</label>
<br>
<input value="2" type="checkbox" id="Two Grades" name="checkboxs[]" value="Two Grades" style="display: none;">
<label for="Two Grades">Two Grades</label>
<br>
<input value="2" type="checkbox" id="Three Grades" name="checkboxs[]" value="Three Grades" style="display: none;">
<label for="Three Grades">Three Grades</label>
<br>
<input value="2" type="checkbox" id="Four Grades" name="checkboxs[]" value="Four Grades" style="display: none;">
<label for="Four Grades">Four Grades</label>
<br>
<input value="2" type="checkbox" id="Five Grades" name="checkboxs[]" value="Five Grades" style="display: none;">
<label for="Five Grades">Five Grades</label>
<br>
<input value="2" type="checkbox" id="Six Grades" name="checkboxs[]" value="Six Grades" style="display: none;">
<label for="Six Grades">Six Grades</label>
<br>
</div>
<br>
<p style="color:#0774D9; font-size: 20px; font-family: 'Verdana' ">Implementation Quality</p>
<p class="resultado" style="background:#0774D9; color: #fff; font-size: 30px"></p>
<br>
<div class="text">
<label for="Teachers_Name">Teacher's Name</label>
<input type="text" name="Teachers_Name" id="Teachers_Name" placeholder="Name" required>
<br>
<br>
<label for="School_Name">School Name</label>
<input type="text" name="School_Name" id="School_Name" placeholder="School Name" required>
<br>
<br>
<label for="Implementation_Quality">Write here your Implementation Quality score :</label>
<input type="text" name="Implementation_Quality" id="Implementation_Quality" placeholder="Implementation Quality" required>
</div>
<input type="submit" name="submit" id="submit" value="Send" style="margin-left: 50px; margin-bottom: 20px; margin-top: 20px;background:#0774D9; color: #fff; font-size: 20px; border-radius: 10px; font-family: 'Verdana';padding: 5px 15px 5px 20px; text-align: center; ">
</form>
</div>
<h1 id="result"></h1>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var insert = [];
$('.get_value').each(function(){
if($(this).is(":checked"))
{
insert.push($(this).val())
}
});
insert = insert.toString();
$.ajax({
url:"insert.php",
method:"POST",
data:(insert:insert),
success:function(data){
$('#result').html(data);
}
});
});
});
</script>
</body>
</html>
PHP
<?php
$conexion = new mysqli("localhost", "root", "");
if(!$conexion){
echo "Conexión no exitosa";
} else {
$base= mysqli_select_db($conexion, "datos1");
if(!$base){
echo "No se pudo conectar a la base de datos";
}
}
//LLAMAMOS LAS VARIBALES
$checkbox= isset($_POST['insert']);
$query= "INSERT INTO BOOKS(name) () VALUES('".$_POST["insert"]."') ";
$result = mysqli_query($conn, $query);
$Teachers_Name="";
$Teachers_Name= isset($_POST['Teachers_Name']) ? $_POST['Teachers_Name']:'';
$Teachers_Name= empty($_POST['Teachers_Name']) ? $_POST['Teachers_Name']:'';
$Teachers_Name= $_POST['Teachers_Name'] ?? '';
$School_Name="";
$School_Name= isset($_POST['School_Name']) ? $_POST['School_Name']:'';
$School_Name= empty($_POST['School_Name']) ? $_POST['School_Name']:'';
$School_Name= $_POST['School_Name'] ?? '';
$Implementation_Quality= "";
$Implementation_Quality= isset($_POST['Implementation_Quality']) ?
$_POST['Implementation_Quality']:'';
$Implementation_Quality= empty($_POST['Implementation_Quality']) ?
$_POST['Implementation_Quality']:'';
$Implementation_Quality= $_POST['Implementation_Quality'] ?? '';
//Guarda las variables
$sql= "INSERT INTO datos_1 (Teachers_Name, School_Name,
Implementation_Quality) VALUES(?, ?, ?)";
$sth = mysqli_prepare($conexion,$sql);
mysqli_stmt_bind_param($sth,'sss', $Teachers_Name, $School_Name,
$Implementation_Quality);
$ejecutar = mysqli_stmt_execute($sth);
if(!$ejecutar){
echo "Hubo algun error";
} else {
echo "Datos guardados correctamente<br><a href='index.php'>Volver</a>";
}
?>