Alors vous avez une page avec différents champs, et vous souhaitez que les utilisateurs puissent mettre à jour le formulaire sans rechargement de page ? Utilisons pour cela AJAX.

Par exemple une page comme ceci avec un grand nombre de lignes à mettre à jour:

Créons une table dans la base de données :

 > CREATE TABLE abonnes (
  abonne_id INT AUTO_INCREMENT PRIMARY KEY,
  nom VARCHAR(20),
  age int,
  verifie VARCHAR(2)
);

Remplissons la table avec quels enregistrements :

> INSERT INTO abonnes (abonne_id, nom, age, verifie)
VALUES
(1, 'Michel', 44, 'on'),
(2, 'Sophie', 13, ''),
(3, 'Martin', 51, 'on'),
(4, 'Anita', 10, ''),
(5, 'Maxime', 23, 'on'),
(6, 'Sylvie', 39, 'on'),
(7, 'Germain', 42, ''),
(8, 'Bilel', 15, 'on'),
(9, 'Julie', 36, 'on'),
(10, 'Gaston', 101, '')
;

On crée 2 scripts : abonnes.php et datasubmit.php

Script « abonnes.php » :

<html>
<head>
<title>Formulaire avec mise à jour de la base de données sans rafraichissement d'écran</title>
 
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

<script type="text/javascript">
        $(document).on("keyup",".changable",function(event){
        var datastring=$($(event.target).parent()).serialize();
        console.log(datastring);
        $.ajax({
            dataType: "html",
            type: "POST",
            url: "datasubmit.php",
            data: datastring,
            success: function (data) {
            }
        });
        return false;
    });

        $(document).on("change",".checkbox",function(event){
        var datastring=$($(event.target).parent()).serialize();
        console.log(datastring);
        $.ajax({
            dataType: "html",
            type: "POST",
            url: "datasubmit.php",
            data: datastring,
            success: function (data) {
            }
        });
        return false;
    });
</script>

</head>

<body>

<?php
// Connexion à la base de données
$database='masuperbase'; $sqluser='moi'; $sqlpass='monmotdepasse';
$dbh = new PDO("mysql:host=sqlserver;dbname=$database", $sqluser, $sqlpass);

// Chargement des enregistrements de la table "abonnes"
$requete="SELECT abonne_id, nom, age, verifie FROM abonnes";
$result = $dbh->query($requete);

foreach( $result as $row ) { // Un formulaire par abonné
        echo "<form method=post name=loginform>";
        echo "<input type=hidden name=abonne_id id=abonne_id value=$row[abonne_id] >";
        echo "<input type=text class=changable name=nom id=nom value=$row[nom]  >";
        echo "<input type=text class=changable name=age id=age value=$row[age] >";
        if ( $row['verifie'] =='on' ) { $checked='checked'; } else  { $checked=''; }
        echo "<input type=checkbox $checked class=checkbox name=verifie >";
        echo '</form>';
}

?>
</body>
</html>

Script « datasubmit.php » :

<?php

// --- Connexion à la base de données ---
$database='masuperbase'; $sqluser='moi'; $sqlpass='monmotdepasse';
$dbh = new PDO("mysql:host=sqlserver;dbname=$database", $sqluser, $sqlpass);

$abonne_id = $_POST['abonne_id'];
$nom = $_POST['nom'];
$age = $_POST['age'];
$verifie = $_POST['verifie'];

$requete = "
UPDATE abonnes SET nom='$nom', age='$age' ,verifie='$verifie' WHERE abonne_id='$abonne_id'
";

$stmt= $dbh->prepare($requete);
$stmt->execute();

?>
Print Friendly, PDF & Email

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Blue Captcha Image
Refresh

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.