Informatique

Modifier une variable PHP en JavaScript : méthodes, exemples et mise à jour côté serveur

Modifier une variable PHP depuis JavaScript suppose de comprendre le fonctionnement des deux langages. PHP exécute le traitement sur le serveur avant l’affichage de la page, tandis que JavaScript intervient ensuite dans le navigateur. Une variable PHP déjà utilisée pour générer la page ne peut donc pas être modifiée directement par un script JavaScript.

JavaScript peut cependant récupérer la valeur produite par PHP, la transformer dans le navigateur, puis envoyer la nouvelle valeur au serveur avec fetch(), Ajax ou un formulaire. PHP reçoit alors cette donnée et peut la stocker dans une session, une base de données, un fichier ou une nouvelle variable utilisée pendant la requête.

La méthode dépend donc de l’objectif recherché :

  • modifier uniquement l’affichage dans la page ;
  • transmettre une variable PHP à JavaScript ;
  • renvoyer une valeur JavaScript vers PHP ;
  • conserver la nouvelle valeur sur le serveur ;
  • actualiser une donnée sans recharger la page.

Peut-on modifier directement une variable PHP avec JavaScript ?

La réponse est non, du moins pas directement.

PHP et JavaScript ne s’exécutent ni au même endroit ni au même moment :

  1. le serveur exécute le code PHP ;
  2. PHP génère du HTML, du CSS et éventuellement du JavaScript ;
  3. le serveur envoie la page au navigateur ;
  4. le navigateur interprète le HTML et exécute JavaScript ;
  5. le traitement PHP de la page est déjà terminé.

Prenons une variable PHP simple :

<?php
$prix = 100;
?>

Une fois la page envoyée au navigateur, la variable $prix n’existe plus dans l’environnement JavaScript. Le navigateur reçoit uniquement le résultat généré par PHP.

Le code suivant ne modifie donc pas la variable PHP :

<?php
$prix = 100;
?>

<script>
let prix = 150;
</script>

Deux variables distinctes portent ici un nom similaire :

  • $prix appartient à PHP ;
  • prix appartient à JavaScript.

La modification de prix en JavaScript ne change pas automatiquement $prix sur le serveur.

Le fonctionnement de l’échange entre PHP et JavaScript

Le transfert d’une valeur suit généralement ce parcours :

Variable PHP
     ↓
Conversion en JSON
     ↓
Variable JavaScript
     ↓
Modification dans le navigateur
     ↓
Requête Fetch ou Ajax
     ↓
Nouveau traitement PHP
     ↓
Session, fichier ou base de données

JavaScript ne remonte donc pas dans le temps pour modifier une variable PHP déjà exécutée. Il déclenche une nouvelle requête HTTP contenant la valeur actualisée.

Passer une variable PHP à JavaScript

La première étape consiste souvent à rendre une valeur PHP disponible dans JavaScript.

Exemple avec une chaîne de caractères

<?php
$nom = 'Alice';
?>

<script>
const nomUtilisateur = <?php echo json_encode($nom); ?>;

console.log(nomUtilisateur);
</script>

La fonction json_encode() produit une représentation JSON de la valeur PHP. Elle peut convertir des chaînes, des nombres, des booléens, des tableaux et des objets en données exploitables par JavaScript.

Cette méthode est préférable à une concaténation manuelle comme :

<script>
const nomUtilisateur = '<?php echo $nom; ?>';
</script>

La concaténation manuelle devient fragile lorsque la valeur contient une apostrophe, des guillemets, un retour à la ligne ou certains caractères HTML.

Exemple avec un nombre

<?php
$quantite = 12;
?>

<script>
let quantite = <?php echo json_encode($quantite); ?>;

quantite = quantite + 3;

console.log(quantite);
</script>

La variable JavaScript vaut désormais 15, mais la variable PHP $quantite reste égale à 12 sur le serveur.

Exemple avec un tableau PHP

<?php
$produit = [
    'nom' => 'Clavier',
    'prix' => 49.90,
    'stock' => 15
];
?>

<script>
const produit = <?php
    echo json_encode(
        $produit,
        JSON_UNESCAPED_UNICODE |
        JSON_HEX_TAG |
        JSON_HEX_AMP |
        JSON_HEX_APOS |
        JSON_HEX_QUOT
    );
?>;

produit.prix = 44.90;
produit.stock--;

console.log(produit);
</script>

Le tableau associatif PHP devient un objet JavaScript :

{
    nom: "Clavier",
    prix: 44.90,
    stock: 14
}

La modification reste toutefois locale au navigateur tant que JavaScript ne renvoie pas cet objet vers PHP.

Modifier la valeur uniquement dans la page HTML

Certains projets n’ont pas besoin de mettre à jour le serveur. La modification concerne uniquement l’affichage visible par l’utilisateur.

<?php
$statut = 'En attente';
?>

<p>
    Statut :
    <strong id="statut">
        <?php echo htmlspecialchars($statut, ENT_QUOTES, 'UTF-8'); ?>
    </strong>
</p>

<button type="button" id="modifierStatut">
    Marquer comme terminé
</button>

<script>
const bouton = document.getElementById('modifierStatut');
const zoneStatut = document.getElementById('statut');

bouton.addEventListener('click', function () {
    zoneStatut.textContent = 'Terminé';
});
</script>

JavaScript modifie ici le DOM, c’est-à-dire la représentation de la page chargée dans le navigateur.

La variable PHP $statut conserve sa valeur initiale. Après un rechargement de la page, le texte « En attente » réapparaîtra si aucune donnée n’a été enregistrée sur le serveur.

Modifier une variable PHP avec JavaScript et Fetch

Pour transmettre une nouvelle valeur à PHP sans recharger entièrement la page, l’API Fetch constitue une solution moderne.

Deux fichiers peuvent être utilisés :

index.php
mettre-a-jour.php

Étape 1 : afficher la valeur dans index.php

<?php
$prixInitial = 100;
?>

<p>
    Prix actuel :
    <strong id="prixAffiche">
        <?php echo number_format($prixInitial, 2, ',', ' '); ?> €
    </strong>
</p>

<label for="nouveauPrix">
    Nouveau prix
</label>

<input
    type="number"
    id="nouveauPrix"
    value="<?php echo htmlspecialchars(
        (string) $prixInitial,
        ENT_QUOTES,
        'UTF-8'
    ); ?>"
    step="0.01"
>

<button type="button" id="enregistrerPrix">
    Enregistrer
</button>

<p id="message" role="status"></p>

Étape 2 : envoyer la valeur avec JavaScript

<script>
const bouton = document.getElementById('enregistrerPrix');
const champPrix = document.getElementById('nouveauPrix');
const prixAffiche = document.getElementById('prixAffiche');
const message = document.getElementById('message');

bouton.addEventListener('click', async function () {
    const nouveauPrix = Number(champPrix.value);

    if (!Number.isFinite(nouveauPrix) || nouveauPrix < 0) {
        message.textContent = 'Saisissez un prix valide.';
        return;
    }

    bouton.disabled = true;
    message.textContent = 'Enregistrement en cours…';

    try {
        const reponse = await fetch('mettre-a-jour.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                prix: nouveauPrix
            })
        });

        const resultat = await reponse.json();

        if (!reponse.ok || resultat.succes !== true) {
            throw new Error(
                resultat.message || 'La mise à jour a échoué.'
            );
        }

        prixAffiche.textContent =
            resultat.prixFormate + ' €';

        message.textContent = resultat.message;

    } catch (erreur) {
        message.textContent = erreur.message;

    } finally {
        bouton.disabled = false;
    }
});
</script>

Fetch permet d’envoyer une requête HTTP depuis le navigateur et de traiter la réponse de manière asynchrone.

Étape 3 : recevoir la valeur dans mettre-a-jour.php

<?php

declare(strict_types=1);

header('Content-Type: application/json; charset=utf-8');

try {
    $corps = file_get_contents('php://input');

    if ($corps === false) {
        throw new RuntimeException(
            'Impossible de lire la requête.'
        );
    }

    $donnees = json_decode(
        $corps,
        true,
        512,
        JSON_THROW_ON_ERROR
    );

    $prix = filter_var(
        $donnees['prix'] ?? null,
        FILTER_VALIDATE_FLOAT
    );

    if ($prix === false || $prix < 0) {
        http_response_code(422);

        echo json_encode([
            'succes' => false,
            'message' => 'Le prix transmis est invalide.'
        ], JSON_UNESCAPED_UNICODE);

        exit;
    }

    /*
     * À ce stade, la valeur peut être :
     * - enregistrée en base de données ;
     * - conservée dans une session ;
     * - enregistrée dans un fichier ;
     * - utilisée dans un autre traitement PHP.
     */

    echo json_encode([
        'succes' => true,
        'prix' => $prix,
        'prixFormate' => number_format(
            $prix,
            2,
            ',',
            ' '
        ),
        'message' => 'Le prix a été mis à jour.'
    ], JSON_UNESCAPED_UNICODE);

} catch (JsonException $erreur) {
    http_response_code(400);

    echo json_encode([
        'succes' => false,
        'message' => 'Le contenu JSON est invalide.'
    ], JSON_UNESCAPED_UNICODE);

} catch (Throwable $erreur) {
    http_response_code(500);

    echo json_encode([
        'succes' => false,
        'message' => 'Une erreur interne est survenue.'
    ], JSON_UNESCAPED_UNICODE);
}

Avec un corps envoyé au format JSON, PHP lit les données brutes depuis php://input. Elles ne sont pas automatiquement disponibles dans $_POST, contrairement à un formulaire envoyé en application/x-www-form-urlencoded ou en multipart/form-data.

Conserver la nouvelle valeur dans une session PHP

Une variable PHP classique disparaît à la fin de la requête. Pour conserver une valeur entre plusieurs pages, une session peut être utilisée.

Initialiser la session

<?php

session_start();

if (!isset($_SESSION['compteur'])) {
    $_SESSION['compteur'] = 0;
}

$compteur = (int) $_SESSION['compteur'];

Envoyer une nouvelle valeur depuis JavaScript

async function enregistrerCompteur(nouvelleValeur) {
    const reponse = await fetch('modifier-compteur.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            compteur: nouvelleValeur
        })
    });

    const resultat = await reponse.json();

    if (!reponse.ok) {
        throw new Error(resultat.message);
    }

    return resultat;
}

Modifier la valeur de session

<?php

declare(strict_types=1);

session_start();

header('Content-Type: application/json; charset=utf-8');

$donnees = json_decode(
    file_get_contents('php://input'),
    true
);

$compteur = filter_var(
    $donnees['compteur'] ?? null,
    FILTER_VALIDATE_INT
);

if ($compteur === false || $compteur < 0) {
    http_response_code(422);

    echo json_encode([
        'succes' => false,
        'message' => 'Compteur invalide.'
    ]);

    exit;
}

$_SESSION['compteur'] = $compteur;

echo json_encode([
    'succes' => true,
    'compteur' => $_SESSION['compteur']
]);

La valeur appartient désormais à $_SESSION et peut être relue pendant une requête ultérieure.

Modifier une donnée PHP dans une base MySQL

Pour une donnée durable, la base de données reste plus adaptée qu’une variable ou une session.

JavaScript transmet par exemple :

const reponse = await fetch('modifier-produit.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        produitId: 42,
        stock: 18
    })
});

Le fichier PHP valide les informations et utilise une requête préparée :

<?php

declare(strict_types=1);

header('Content-Type: application/json; charset=utf-8');

$donnees = json_decode(
    file_get_contents('php://input'),
    true
);

$produitId = filter_var(
    $donnees['produitId'] ?? null,
    FILTER_VALIDATE_INT
);

$stock = filter_var(
    $donnees['stock'] ?? null,
    FILTER_VALIDATE_INT
);

if (
    $produitId === false ||
    $produitId < 1 ||
    $stock === false ||
    $stock < 0
) {
    http_response_code(422);

    echo json_encode([
        'succes' => false,
        'message' => 'Données invalides.'
    ]);

    exit;
}

$pdo = new PDO(
    'mysql:host=localhost;dbname=boutique;charset=utf8mb4',
    'utilisateur',
    'mot_de_passe',
    [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ]
);

$requete = $pdo->prepare(
    'UPDATE produits
     SET stock = :stock
     WHERE id = :id'
);

$requete->execute([
    'stock' => $stock,
    'id' => $produitId
]);

echo json_encode([
    'succes' => true,
    'stock' => $stock,
    'message' => 'Le stock a été actualisé.'
]);

Le navigateur ne modifie pas directement la base. Il demande au serveur d’effectuer une opération autorisée.

Utiliser FormData au lieu de JSON

FormData convient particulièrement aux formulaires et aux fichiers.

Code HTML

<form id="formulaireProfil">
    <label for="nom">
        Nom
    </label>

    <input
        type="text"
        id="nom"
        name="nom"
        required
    >

    <button type="submit">
        Enregistrer
    </button>
</form>

Code JavaScript

const formulaire =
    document.getElementById('formulaireProfil');

formulaire.addEventListener('submit', async function (event) {
    event.preventDefault();

    const donnees = new FormData(formulaire);

    const reponse = await fetch('modifier-profil.php', {
        method: 'POST',
        body: donnees
    });

    const resultat = await reponse.json();

    console.log(resultat);
});

Code PHP

<?php

header('Content-Type: application/json; charset=utf-8');

$nom = trim((string) ($_POST['nom'] ?? ''));

if ($nom === '') {
    http_response_code(422);

    echo json_encode([
        'succes' => false,
        'message' => 'Le nom est obligatoire.'
    ]);

    exit;
}

echo json_encode([
    'succes' => true,
    'nom' => $nom
], JSON_UNESCAPED_UNICODE);

Avec FormData, il ne faut pas définir manuellement l’en-tête Content-Type. Le navigateur ajoute automatiquement la limite nécessaire au format multipart/form-data.

Envoyer une valeur JavaScript avec un formulaire classique

Une autre méthode consiste à placer la valeur dans un champ caché.

<form method="post" action="traitement.php" id="formulaire">
    <input
        type="hidden"
        name="valeurJavaScript"
        id="valeurJavaScript"
    >

    <button type="submit">
        Envoyer
    </button>
</form>

<script>
const formulaire = document.getElementById('formulaire');
const champCache = document.getElementById('valeurJavaScript');

formulaire.addEventListener('submit', function () {
    champCache.value = 'Valeur calculée dans JavaScript';
});
</script>

PHP récupère ensuite la donnée :

<?php

$valeur = trim(
    (string) ($_POST['valeurJavaScript'] ?? '')
);

echo htmlspecialchars(
    $valeur,
    ENT_QUOTES,
    'UTF-8'
);

Cette solution recharge la page, mais elle reste simple et adaptée aux formulaires traditionnels.

GET, POST, JSON ou FormData : quelle méthode choisir ?

MéthodeUsage conseilléRéception dans PHP
Paramètres GETFiltrage, recherche, navigation$_GET
Formulaire POSTFormulaire HTML classique$_POST
FormDataFormulaire et téléversement de fichiers$_POST et $_FILES
JSON avec FetchInterface dynamique ou APIphp://input puis json_decode()
Session PHPConservation temporaire par utilisateur$_SESSION
Base de donnéesConservation durable et partagéePDO ou MySQLi

Peut-on utiliser Ajax avec jQuery ?

Oui. Un projet utilisant déjà jQuery peut envoyer la nouvelle valeur avec $.ajax() :

$.ajax({
    url: 'modifier-variable.php',
    method: 'POST',
    dataType: 'json',
    data: {
        nouvelleValeur: 25
    },
    success: function (resultat) {
        console.log(resultat);
    },
    error: function () {
        console.error('La requête a échoué.');
    }
});

Le fichier PHP récupère la donnée dans $_POST :

<?php

header('Content-Type: application/json; charset=utf-8');

$nouvelleValeur = filter_var(
    $_POST['nouvelleValeur'] ?? null,
    FILTER_VALIDATE_INT
);

if ($nouvelleValeur === false) {
    http_response_code(422);

    echo json_encode([
        'succes' => false,
        'message' => 'Valeur incorrecte.'
    ]);

    exit;
}

echo json_encode([
    'succes' => true,
    'valeur' => $nouvelleValeur
]);

Fetch évite cependant d’ajouter une bibliothèque externe lorsque le projet n’utilise pas déjà jQuery.

Modifier une variable globale PHP avec JavaScript

Une variable globale PHP ne devient pas accessible au navigateur parce qu’elle est déclarée avec global ou dans $GLOBALS.

<?php

$score = 10;

function afficherScore(): int
{
    global $score;

    return $score;
}

Cette portée reste entièrement liée à l’exécution PHP sur le serveur.

JavaScript doit toujours envoyer une nouvelle requête pour demander une modification :

fetch('modifier-score.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        score: 20
    })
});

La nouvelle requête PHP peut alors modifier une session, une donnée en base ou une valeur utilisée pendant cette nouvelle exécution.

Pourquoi la variable PHP retrouve-t-elle son ancienne valeur ?

Plusieurs situations expliquent ce comportement.

La valeur a seulement été modifiée dans JavaScript

let prix = 200;

Cette instruction agit uniquement dans le navigateur.

La nouvelle valeur n’a pas été enregistrée

Le fichier PHP a reçu la valeur, mais il ne l’a conservée ni en session, ni en base de données, ni dans un fichier.

La page recharge la valeur initiale

<?php
$prix = 100;
?>

Cette affectation réinitialise $prix à chaque chargement.

La requête Fetch échoue

Une mauvaise URL, une erreur PHP ou une réponse JSON invalide peut empêcher l’enregistrement.

Le serveur reçoit un corps JSON dans $_POST

Le code suivant échouera avec une requête JSON :

$prix = $_POST['prix'];

Il faut lire le corps brut :

$donnees = json_decode(
    file_get_contents('php://input'),
    true
);

$prix = $donnees['prix'] ?? null;

Erreurs fréquentes à éviter

Confondre la variable PHP et la variable JavaScript

<?php $total = 50; ?>

<script>
let total = 100;
</script>

Ces deux variables sont indépendantes.

Injecter une chaîne PHP sans encodage JSON

<script>
const texte = '<?php echo $texte; ?>';
</script>

Une apostrophe présente dans $texte peut casser le script. json_encode() constitue le mécanisme approprié pour produire une valeur JSON valide.

Faire confiance à la validation JavaScript

Une personne peut modifier ou contourner le code exécuté dans son navigateur. PHP doit donc valider à nouveau toutes les données reçues.

Autoriser JavaScript à choisir une requête SQL

Le navigateur doit envoyer des données métier, par exemple un identifiant et une quantité. PHP conserve le contrôle de la requête SQL exécutée.

Retourner du HTML au milieu d’une réponse JSON

Le fichier PHP doit éviter les affichages parasites :

var_dump($donnees);
echo 'test';

Ces sorties rendent souvent la réponse JSON impossible à analyser.

Sécuriser la modification d’une donnée PHP

Une mise à jour côté serveur doit inclure plusieurs contrôles :

  • vérifier le type, le format et les limites de la donnée ;
  • contrôler que l’utilisateur est connecté ;
  • vérifier son droit de modifier la ressource ;
  • employer un jeton CSRF pour les actions sensibles ;
  • utiliser des requêtes SQL préparées ;
  • retourner des codes HTTP cohérents ;
  • ne pas exposer les messages techniques internes ;
  • échapper les données lors de leur affichage HTML ;
  • utiliser HTTPS pour les échanges réseau.

La validation JavaScript améliore l’expérience utilisateur, mais la validation PHP protège réellement le serveur.

Exemple complet : modifier un compteur PHP depuis JavaScript

Voici une version simple utilisant une session.

fichier compteur.php

<?php

session_start();

$_SESSION['compteur'] ??= 0;

$compteur = (int) $_SESSION['compteur'];
?>

<div class="compteur">
    <p>
        Compteur :
        <strong id="valeurCompteur">
            <?php echo $compteur; ?>
        </strong>
    </p>

    <button type="button" id="incrementer">
        Ajouter 1
    </button>

    <p id="etatCompteur" role="status"></p>
</div>

<script>
const bouton = document.getElementById('incrementer');
const valeurAffichee = document.getElementById('valeurCompteur');
const etat = document.getElementById('etatCompteur');

bouton.addEventListener('click', async function () {
    const valeurActuelle =
        Number(valeurAffichee.textContent);

    const nouvelleValeur =
        valeurActuelle + 1;

    bouton.disabled = true;

    try {
        const reponse = await fetch(
            'enregistrer-compteur.php',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    compteur: nouvelleValeur
                })
            }
        );

        const resultat = await reponse.json();

        if (!reponse.ok) {
            throw new Error(resultat.message);
        }

        valeurAffichee.textContent =
            resultat.compteur;

        etat.textContent =
            'Compteur enregistré.';

    } catch (erreur) {
        etat.textContent =
            erreur.message;

    } finally {
        bouton.disabled = false;
    }
});
</script>

fichier enregistrer-compteur.php

<?php

declare(strict_types=1);

session_start();

header('Content-Type: application/json; charset=utf-8');

try {
    $donnees = json_decode(
        file_get_contents('php://input'),
        true,
        512,
        JSON_THROW_ON_ERROR
    );

    $compteur = filter_var(
        $donnees['compteur'] ?? null,
        FILTER_VALIDATE_INT
    );

    if ($compteur === false || $compteur < 0) {
        http_response_code(422);

        echo json_encode([
            'succes' => false,
            'message' => 'Valeur invalide.'
        ]);

        exit;
    }

    $_SESSION['compteur'] = $compteur;

    echo json_encode([
        'succes' => true,
        'compteur' => $_SESSION['compteur']
    ]);

} catch (JsonException $erreur) {
    http_response_code(400);

    echo json_encode([
        'succes' => false,
        'message' => 'Requête JSON invalide.'
    ]);
}

Le clic modifie d’abord la valeur calculée par JavaScript. Fetch envoie ensuite cette valeur à PHP, qui la conserve dans la session. La modification subsiste ainsi après le rechargement de la page.

FAQ sur la modification d’une variable PHP en JavaScript

Comment changer une variable PHP avec un bouton JavaScript ?

Le bouton déclenche une fonction JavaScript. Cette fonction envoie la nouvelle valeur à un fichier PHP avec Fetch, Ajax ou un formulaire. Le fichier PHP valide et enregistre ensuite la donnée.

JavaScript peut-il accéder à une variable PHP ?

JavaScript peut accéder à la valeur transmise par PHP dans le document, par exemple avec json_encode(), un attribut data-*, un champ caché ou une réponse JSON. Il ne peut pas accéder directement à la mémoire du processus PHP.

Comment modifier une variable de session PHP avec JavaScript ?

JavaScript envoie la nouvelle valeur à un endpoint PHP. Celui-ci appelle session_start(), valide la donnée, puis modifie $_SESSION.

Comment envoyer une variable JavaScript vers PHP sans recharger la page ?

Utilisez Fetch ou Ajax avec une requête POST. PHP reçoit ensuite la valeur dans $_POST ou dans le corps JSON lu avec php://input.

Pourquoi ma variable JavaScript ne modifie-t-elle pas PHP ?

La variable JavaScript existe uniquement dans le navigateur. Une requête vers le serveur reste indispensable pour transmettre la nouvelle valeur.

Comment passer une variable PHP dans un fichier JavaScript externe ?

Le fichier PHP peut créer un objet global de configuration avant le chargement du fichier externe :

<script>
window.configuration = <?php
    echo json_encode($configuration);
?>;
</script>

<script src="application.js"></script>

Le fichier application.js accède ensuite à :

console.log(window.configuration);

Une autre solution consiste à placer les données dans un élément JSON dédié ou à les récupérer depuis un endpoint API.

Peut-on modifier une variable PHP avec localStorage ?

localStorage conserve une valeur dans le navigateur, pas sur le serveur. JavaScript peut la relire lors d’une visite ultérieure, mais PHP ne la connaît pas tant que le navigateur ne la lui transmet pas dans une requête.

En résumé

Modifier une variable PHP en JavaScript revient en réalité à organiser un échange entre le navigateur et le serveur.

Pour une modification visuelle temporaire, JavaScript met directement à jour la page. Pour une modification durable, JavaScript envoie la nouvelle valeur à PHP avec Fetch, Ajax ou un formulaire. PHP valide ensuite la donnée et la conserve dans une session, une base de données ou un autre espace de stockage.

La démarche correcte repose sur quatre étapes :

  1. transmettre la valeur PHP initiale à JavaScript ;
  2. modifier cette valeur dans le navigateur ;
  3. envoyer la nouvelle donnée au serveur ;
  4. la valider et l’enregistrer avec PHP.

Cette architecture sépare clairement l’interface utilisateur du traitement serveur et permet de construire des formulaires dynamiques, des tableaux de bord, des paniers, des compteurs, des outils de gestion et des applications PHP interactives.


Test pratique : modifier une variable PHP avec JavaScript

Modifiez la valeur dans le navigateur, observez la différence avec la valeur serveur, puis simulez l’envoi de la nouvelle donnée à PHP.

1. Définir la valeur

2. Observer le résultat

Valeur JavaScript En attente
Valeur PHP simulée En attente
Les deux valeurs sont actuellement identiques.
1
PHP génère

La valeur initiale est intégrée dans la page.

2
JavaScript modifie

La valeur change uniquement dans le navigateur.

3
Fetch transmet

La nouvelle donnée est envoyée au serveur.

4
PHP enregistre

La valeur est conservée en session ou en base.

JavaScript avec Fetch
PHP — enregistrer-variable.php
Important : le bouton « Envoyer à PHP » simule ici la réponse du serveur. Pour une mise à jour réelle, créez le fichier enregistrer-variable.php proposé dans le bloc de code.
error: Content is protected !!