UPDATE JS - AJAX
Résoludelaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je sollicite votre aide. J'ai un problème j'ai besoin d'aide pour le résoudre.
Je souhaite mettre à jour un formulaire en JS et AJAX ça ne fonctionne pas
Mon Code
<form id="updateMem" method="POST"> <div class="form-group row"> <label for="nom" class="col-sm-2 col-form-label">Nom</label> <div class="col-sm-10"> <input type="text" class="form-control" name="nom" id="nom" value="<?php echo $nom; ?>"> </div> </div> <div class="form-group row"> <label for="prenom" class="col-sm-2 col-form-label">Prénom</label> <div class="col-sm-10"> <input type="text" class="form-control" name="prenom" id="prenom" value="<?php echo $prenom; ?>"> </div> </div> <!-- Et d'autres champs --> <div class="button_right"> <button type="submit" class="btn btn-primary" name="edit_mem" id="btn-up_mem">Enregistrer</button> </div> </form>
au dessous le JS
<script> var formulaire = document.getElementById('updateMem'); formulaire.addEventListener('submit', function(e) { e.preventDefault(); // empêche la soumission normale du formulaire var xhr = new XMLHttpRequest(); xhr.open('POST', 'ajaxUpMem.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.log('Une erreur est survenue : ' + xhr.status); } }; var formData = new FormData(formulaire); xhr.send(formData); }); </script>
Le PHP : ajaxUpMem.php
<?php require '../connexion.php'; $requp = "UPDATE membre SET id_famille = :id_famille, sexe = :sexe, nom = :nom, nom_ep = :nom_ep, prenom = :prenom, prenom2 = :prenom2, adr1 = :adr1, adr2 = :adr2, cp = :cp, ville = :ville, pays = :pays, tel = :tel, mobile = :mobile, email = :email, date_naissance = :date_naissance, lieu_naissance = :lieu_naissance, profession = :profession, photo = :photo, date_mod = :date_mod, user_mod = :user_mod, date_deces = :date_deces WHERE id_membre = :id_membre"; $photo = $_POST['photo']; $old_photo = $_POST['old_photo']; $id_membre = $_POST['id']; $id_famille = $_POST['id_famille']; $sexe = $_POST['sexe']; $nom = strtoupper($_POST['nom']); $nom_ep = strtoupper($_POST['nom_ep']); $prenom = ucfirst(strtolower($_POST['prenom'])); $prenom2 = $_POST['prenom2']; $adr1 = $_POST['adr1']; $adr2 = $_POST['adr2']; $cp = $_POST['cp']; $ville = strtoupper($_POST['ville']); $pays = strtoupper($_POST['pays']); $tel = $_POST['tel']; $mobile = $_POST['mobile']; $email = htmlentities($_POST['email']); $date_naissance = $_POST['annee_naissance'].'-'.$_POST['mois_naissance'].'-'.$_POST['jour_naissance']; $lieu_naissance = $_POST['lieu_naissance']; $profession = $_POST['profession']; $date_mod = date('Y-m-d'); $user_mod = $_POST["user_log"]; if($_POST['jour_deces'] == '' OR $_POST['mois_deces'] == '' OR $_POST['annee_deces'] == '' ){ $date_deces = ''; }else{ $date_deces = $_POST['annee_deces'].'-'.$_POST['mois_deces'].'-'.$_POST['jour_deces']; } if (!empty($_FILES['photo']['name'])) { $nom_fichier = $_FILES['photo']['name']; $ext = explode('.', $nom_fichier); $ext = strtolower($ext[count($ext) - 1]); $nom_md5 = md5($nom_fichier); $taille = $_FILES['photo']['size']; $type = $_FILES['photo']['type']; $tmp = $_FILES['photo']['tmp_name']; $chemin = utf8_encode(stripslashes($nom_fichier)); $dossier="./photo/".$id_membre.".".$ext.""; if(move_uploaded_file ($_FILES['photo']['tmp_name'], $dossier)) { $photo = $id_membre.".".$ext; } }else{ $photo = $old_photo; } $datas = array(':id_membre'=>$id_membre, ':id_famille'=>$id_famille, ':sexe'=>$sexe, ':nom'=>$nom, ':nom_ep'=>$nom_ep, ':prenom'=>$prenom, ':prenom2'=>$prenom2, ':adr1'=>$adr1, ':adr2'=>$adr2, ':cp'=>$cp, ':ville'=>$ville , ':pays'=>$pays ,':tel'=>$tel , ':mobile'=>$mobile , ':email'=>$email, ':date_naissance'=>$date_naissance, ':lieu_naissance'=>$lieu_naissance, ':profession'=>$profession, ':photo'=>$photo, ':date_mod'=>$date_mod, ':user_mod'=>$user_mod, ':date_deces'=>$date_deces); try{ $requete = $pdo->prepare($requp); $requete->execute($datas); } catch(Exception $e){ echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($datas); }
Merci d'avance pour vos retours
Macintosh / Chrome 112.0.0.0
- UPDATE JS - AJAX
- Windows update bloqué - Guide
- Winget update - Guide
- Asus live update - Télécharger - Utilitaires
- Wsus offline update - Télécharger - Systèmes d'exploitation
- Nettoyage windows update - Guide
9 réponses
Bonjour
Pour commencer, que ta fiche la console de ton navigateur lorsque tu fais appel à ton Ajax ?
Console
DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
Avant mon formulaire j'ai cette requête
$sql = 'SELECT * FROM membre where id_membre= :id_membre'; $data = array(':id_membre'=>$_GET['id']); try{ $requete = $pdo->prepare($sql); $requete->execute($data); $var = $requete->fetch(); $id_famille = $var['id_famille']; $photo = $var['photo']; $old_photo = $var['photo']; $sexe = $var['sexe']; $nom = $var['nom']; $nom_ep = $var['nom_ep']; $prenom = prenom_double($var['prenom']); $prenom2 = prenom_double($var['prenom2']); $adr1 = $var['adr1']; $adr2 = $var['adr2']; $cp = $var['cp']; $ville = $var['ville']; $pays = $var['pays']; $tel = $var['tel']; $mobile = $var['mobile']; $email = $var['email']; $date_naissance = explode('-', $var['date_naissance']); $annee_naissance = $date_naissance[0]; $mois_naissance = $date_naissance[1]; $jour_naissance = $date_naissance[2]; $lieu_naissance = $var['lieu_naissance']; $profession = $var['profession']; $date_deces = explode('-', $var['date_deces']); $annee_deces = $date_deces[0]; $mois_deces = $date_deces[1]; $jour_deces = $date_deces[2]; $date = $var['date']; $user = $var['user']; $date_mod = $var['date_mod']; $user_mod = $var['user_mod']; }catch(Exception $e){ echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($data); }
On reprend ...
Tu dis vouloir mettre à jour un formulaire en AJAX....
Mettre à jour un formulaire, pour moi, signigie que tu veux y afficher des informations.
Sauf que...
1 - Ton code sert à uploader un fichier via ce formulaire et traiter cet upload via un envoi en ajax ( tu envois des données... tu ne veux donc pas les "lire" pour les afficher dans ce formulaire )
2 - Ton code JS est posé là .. comme ça ... sans être dans une fonction ... et sans être appellé par un bouton ou quoi que ce soit dans ton code
3 - Si tu veux que ton code JS soit utilisé .. il faut, soit retirer le "submit" de ton bouton et y ajouter un "onclick" ... soit détécter la soumission du formulaire ( onSubmit ) pour faire, à la place de l'action "normale", appel à ton code JS
En l'état .. normal que tu code ne marche pas... vu qu'il ne fait rien...
J'ai fait comme ça, mais ça ne marche toujours pas.
Merci d'avance pour ton retour
le form
<form id="updateMem" method="POST"> </form>
Le button
<button onclick="upMem()" class="btn btn-primary" name="edit_mem" id="btn-up_mem">Enregistrer</button>
La fonction JS
<script> function upMem() { var formulaire = document.getElementById('updateMem'); var xhr = new XMLHttpRequest(); xhr.open('POST', 'ajaxUpMem.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.log('Une erreur est survenue : ' + xhr.status); } }; var formData = new FormData(formulaire); xhr.send(formData); } </script>
Et donc ? qu'est-ce qui s'affiche dans ta console ?
Si tu as des erreurs ( même provenant d'autre chose que cette partie du code ) il faut les corriger sinon ça peut bloquer l'exécution de ce code.
Si tu n'as pas d'erreur... vois tu l'appel à ton ajax ? ( il faut activer le debugage du XHR sous FireFox ( ce que je te conseille fortement d'utiliser pour debugguer l'ajax) , ou, regarder dans l'onglet "réseau" si tu es sous chrome. ( mais beaucoup moins facile à lire.. )
Et donc, si tu vois ton appel ajax lorsque tu cliques sur ton bouton... que t'affichent les console.log ? ( n'hésites pas à en ajouter dans ton code pouvoir si tu rentres bien dans ta fonction )
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionBonjour,
Réponse tardive : navré.
J'ai mis des alert : ils affichent donc je passe bien dans la fonction.
Dans la console, je n'ai plus de message d'erreur.
La problème persiste, aucune mise à jour dans la base de données.
Est ce que je n'ai pas la bonne librairie ajax ?
D'où peut venir le problème ?
Merci pour vos retours
Donc :
As tu regardé, dans la console, la ligne qui correspond à ton appel AJAX ?
Pour se faire .. le mieux ..c'est, via le navigateur FIREFOX, activer le debug du XHR ... puis, cliquer sur ton bouton pour déclencher l'appel AJAX.
Si aucune ligne n'apparait... c'est que ton bouton n'est pas correctement relié à ton JS .. ( d'ailleurs, précise sur ton bouton le type="button" )
Si une ligne apparait.. il faut regarder dedans ce qui est retourné par le code php ..
re,
Avec l'inspecteur Firefox, j'ai eu ceci :
Le formulaire contient un champ de sélection de fichier, mais ne spécifie pas la méthode POST et l’encodage « multipart/form-data ». Le fichier ne sera pas envoyé.
Effectivement, je n'avais pas précisé que j'avais un input type="file" (c'est ma faute)
J'ai modifié mon form
<form id="updateMem" method="POST" enctype="multipart/form-data">
Quand je clique sur le bouton, les changements sont bien pris en compte mais quand je recharge la page, j'ai toujours les anciennes données
Quel est le problème ? Le debugeur ne retourne pas d"erreur.
Dans le même ordre d'idée, j'aimerais savoir comment faire un JS pour gérer l'envoi de l'image
Merci d'avance pour ton retour
Tant que tu ne me montreras pas le resultat de l'appel ajax dans la console... je ne te donnerai pas plus d'aide.
En plus tu me parles de rafraichir la page pour voir des changements... dans ce cas.. l'ajax ne te sert à rien...
De toutes façons, ta question initiale ne concerne que l'ajout en BDD ( via ajax) des données de ton formulaire. Pour toute autre demande, il faudra recréer une nouvelle discussion ( une fois que celle la sera résolue.. )
À noter également que ton code PHP ne retourne aucun affichage et par conséquent rien ne se mettra à jour dans ton formulaire....