[AJAX] Mémoriser les valeurs d'un formulaire avant validation

Version imprimable

19/09/2011, 15h38
Baldy

[AJAX] Mémoriser les valeurs d'un formulaire avant validation

Bonjour
(j'espère ne pas me tromper de section ...)

Je suis en train de réaliser un formulaire servant de fiche de suivi d'élève pour un établissement scolaire.

Je souhaite que ces derniers ajoutent leurs notes de la semaine mais SANS valider le formulaire à chaque fois.
Il faudrait donc pouvoir entrer la note, choisir la matière et ensuite valider le choix pour passer à la note suivante.
Cette action ne validerais pas le formulaire mais stockerais la note en mémoire (pourquoi pas l'afficher dans un DIV). Et à la validation du formulaire, toutes les notes données seraient ensuite envoyées dans la BDD.

Si vous avez une idée sur le script à écrire pour réaliser cela ...

Merci
20/09/2011, 00h26
F0ul

Le principe avec les technologies AJAX c'est que tu peux soumettre le formulaire sans que cela se voit. Tu peux donc enregistrer la note dans la base et vider les champs pour laisser entrer la première note.

Sinon si tu tiens absolument à ne faire qu'une requête dans la base, tu peux simplement masquer les champs et en ajouter de nouveaux à chaque fois que tu entres une note.
Ou alors tu peux aussi ajouter les notes une par une dans un élément comme DIV et à la validation du formulaire, il faudra que tu récupères le contenu de cet élément.
20/09/2011, 09h05
Baldy

Tout ça parait censé. Tes diverses solutions ont l'air toutes plus intéressantes les unes que les autres.

Le soucis c'est que je ne sais pas comment procéder ...

Citation:

Le principe avec les technologies AJAX c'est que tu peux soumettre le formulaire sans que cela se voit. Tu peux donc enregistrer la note dans la base et vider les champs pour laisser entrer la première note.

Comment faire pour enregistrer une note sans pour autant recharger la page?

Citation:

Sinon si tu tiens absolument à ne faire qu'une requête dans la base, tu peux simplement masquer les champs et en ajouter de nouveaux à chaque fois que tu entres une note.

Masquer le champ ça devrait pouvoir se faire. Mais en ajouter un nouveau ... et surtout comment récupérer les X champs? Comment savoir combien il y en a? et comment ils se nomment?

Citation:

Ou alors tu peux aussi ajouter les notes une par une dans un élément comme DIV et à la validation du formulaire, il faudra que tu récupères le contenu de cet élément.

Oui je voit ce que tu veux dire. Si je ne me trompe pas on doit pouvoir utiliser le innerHtml du Javascript pour modifier le contenu d'un DIV. Mais comment récupérer ensuite ses données à la soumission du formulaire?

Citation:

Envoyé par Baldy

Comment faire pour enregistrer une note sans pour autant recharger la page?

Avec Javascript et l'objet XMLHttpRequest tu peux envoyer des données à un script PHP.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function sauvegardeNote() { /* On récupère la note */ var valeurNote = document.getElementById("champNote").value ; /* On crée l'objet XMLHttpRequest / la fonction getHTTPObject est à créer */ var xmlhttp = getHTTPObject(); /* Préparation d'une requête asynchrone de type POST : */ xmlhttp.open("POST", "/sauvegardeNote.php",true); /* Effectue la requête en envoyant les données : */ xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlhttp.send("note=valeurNote"); }
Tu pourras alors récupérer la note avec $_POST['note'] dans sauvegardeNote.php.

Citation:

Envoyé par Baldy

Masquer le champ ça devrait pouvoir se faire. Mais en ajouter un nouveau ... et surtout comment récupérer les X champs? Comment savoir combien il y en a? et comment ils se nomment?

Encore une fois avec Javascript tu peux ajouter des champs par exemple avec la fonction appendChild(). Je te conseille de lire ceci :
Citation:
appendChild()
Ajoute un nœud nouvellement créé auparavant à la structure de nœuds existante, et cela de façon à ce qu'il soit inséré comme dernier nœud enfant d'un nœud à mentionner.
Exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html><head><title>Test</title></head> <body> <ol id="Liste"> <li>Element</li> </ol> <script language="JavaScript" type="text/javascript">  </script> </body></html>
Explication:

L'exemple remplit automatiquement une liste numérotée avec des données. Tout de suite après la liste numérotée suit un passage JavaScript. Tout d'abord, l'élément de liste existant est supprimé avec la méthode vers le bas removeChild() . Ensuite est notée une Autre page d'information boucle for qui est parcourue 10 fois. À chaque tour de boucle, est créé dans un premier temps un nouvel élément du type li avec Autre page d'information document.createElement(). Ensuite une variable numeroli est fixée sur une valeur qui est supérieure de 1 au compteur de boucle i. Cette variable est utilisée dans l'instruction suivante, dans laquelle un nouveau nœud texte est créé avec Autre page d'information document.createTextNode(). Enfin suivent - toujours dans la boucle for - deux appels d' appendChild(). La première de ces instructions accède avec document.getElementById("Liste") à l'élément ol et fait en sorte qu'un nouvel élément enfant soit inséré à la fin. Est ajouté le nœud élément nouveauLI venant d'être créé et qui sauvegarde un nouvel élément li. La deuxième de ces instructions utilise le compteur de boucle i pour accéder avec document.getElementsByTagName("li")[i] à l'élément li venant d'être créé. À ce dernier est ajouté avec appendChild() le nœud texte créé auparavant comme élément enfant. De cette manière la liste se remplit à chaque tour de boucle d'un nouvel élément li y compris le contenu de caractères.
Pour savoir combien il y en a tu peux créer une variable "cpt" qui va compter pour toi. Au moment d'ajouter un nouveau champ, tu feras "cpt++". Ainsi tu auras la valeur stocké. Ou bien, si tu lis un peu plus dans le lien que je t'ai donné, tu verras que tu peux compter le nombre d'enfant dans un noeud.

Citation:

Envoyé par Baldy

Oui je voit ce que tu veux dire. Si je ne me trompe pas on doit pouvoir utiliser le innerHtml du Javascript pour modifier le contenu d'un DIV. Mais comment récupérer ensuite ses données à la soumission du formulaire?

innerHTML peut être utilisé en lecture ou en écriture.
Code:

1 2 var value = eltID.innerHTML ; // lecture eltID.innerHTML = newValue ; // écriture