Récupérer les valeurs des checkbox

**BOU59000** · 30/04/2018, 10h22

Bonjour à toutes et à tous,

Pour un projet j'ai appris PHP/MySQL... et au fil de mes découvertes, on m'oriente vers AJAX afin d'éviter de recharger trop de pages...
Après un tutoriel et quelques heures à trifouiller les codes pour comprendre comment cela s'imbrique... c'est magique! Sauf pour les checkbox...

De mon formulaire j'arrive à récupérer les valeurs des <input type="text"> et les mettre dans la BDD.
Pour les checkbox pas moyen de récupérer les valeurs cochée/ pas cochée.

Merci d'avance pour votre aide

-----------------------------------------------------------------------
Mon code est partagée sur 3 pages:
Page formulaire.php
Page Script.js
Page Enregistrer_Dans_BDD.php => Send.php

Après m'être amusé plusieurs heures, le hic vient de Script.js.
Ne connaissant pas java, je pense que je n'utilise pas les bons paramètres.

FORMULAIRE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
 
<html>
 
    <head>
 
        <script src ="Jquery.js"></script>
        <script src ="Script.js"></script>
 
    </head>
 
    <body>
 
        <form method="post" class="formulaire">
 
            <div class="return"></div>
 
            <input type="text" class="nom"><br>            
           <input type="checkbox" name="checkbox001" class="checkbox001">
 
            <input class="submit" type="submit" value="Envoyer">
 
            <div class="afficher"></div>
 
        </form>
 
    </body>
 
</html>

Script.JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function()
{
 
    $('.formulaire').submit(function()
    {
        var nom = $('.nom').val();
 
        if(document.getElementByID("checkbox001").checked)
       {
        var checkbox001 = 1;
        }
        else
        {
         var checkbox001 = 0;
         }
 
        $.post('Send.php',{nom:nom,checkbox001:checkbox001},function(data)
        {
            $('.return').html(data).slidedown();
            $('.nom').val('');
            $('.checkbox001').val('');
        });
    return false;
    });
 
});

SEND.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
 
    if(isset($_POST['nom']))
    {
        $nom = htmlspecialchars($_POST['nom']);
        $checkbox001 = $_POST['checkbox001'];
 
$db = new PDO('mysql:host=localhost;dbname=essai_bdd','root','');
 
        $db->exec("INSERT INTO ajax(id,nom,checkbox001) VALUES('''$nom','$checkbox001')");
        echo "Vos données ont été envoyées";
    }
    else
    {
        echo "Veuillez compléter tous les champs";
    }
?>

**Toufik83** · 30/04/2018, 14h39

bonjour,
j'ai plusieurs remarques
tout d'abord la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementByID("checkbox001").checked

tu veux savoir si le checkbox est coché ou non, mais t'utilises un id qui n'est pas attribué a cet input, il fallait utiliser la classe.
en jQuery on met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.checkbox001').is(':checked')

Au niveau du php, tu as des erreurs de syntaxe, et tu ne sécurise pas ta requête avec prepare.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 $db->prepare("INSERT INTO ajax(nom,checkbox001) VALUES(?,?)");
$db->execute([$nom,$checkbox001]);

**BOU59000** · 30/04/2018, 15h54

Bonjour Toufik83,

Un grand MERCIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

Voici ce qui me manquait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.checkbox001').is(':checked')

Je n'ai jamais fait de js ni d'AJAX avant.
Si je comprends bien, dès que j'utilise "class" je récupère les éléments en js avec $('.NomDeMaClass').CequeJenAttends (Exemple .val() pour la valeur...)) On appelle cela attribut aussi en js?

------------------
Pour le php, mon code est bien sécurisé avec prepare.
J'ai rédigé en direct un code plus simple sur developpez afin de zoomer sur ce qui me semblait déconner.

**Toufik83** · 30/04/2018, 16h29

Envoyé par BOU59000

Si je comprends bien, dès que j'utilise "class" je récupère les éléments en js avec $('.NomDeMaClass').CequeJenAttends (Exemple .val() pour la valeur...)) On appelle cela attribut aussi en js?

prenons exemple de : <input type='text' id='idtest' class='classtest' value='valeurtest'/>les attributs de cet input sont type, id, class et value.
pour la récupération de la valeur de cet élément, on utilise souvent l'attribut id unique ou l'attribut class aussi.
Si on veux récupérer la valeur de cet élément, on a plusieurs possibilités.
1- soit par Id (dans ce cas il faut mettre un "#" au début du sélecteur jQuery)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#idtest').val();

2- soit par classe (dans ce cas il faut mettre un point "." au début du sélecteur jQuery)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.classtest').val();

3- soit par classe ET id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#idtest.classtest').val();

**BOU59000** · 30/04/2018, 16h43

Merci pour ces explications :-)

J'ai un second point que je n'arrive pas à résoudre.
Il est lié à ce sujet mais je vais le placer dans une autre discussion et lier les deux discussions.

Comme cela si quelqu'un d'autre à le même soucis que moi...

Pour les checkbox: sujet résolu! :-)

Récupérer les valeurs des checkbox

jQuery

Vue hybride

Discussions similaires

Partager

Partager