Bonjour, je souhaite faire une page ou on peut rentrer des infos pour les mémoriser (mon site est offline, c'est pour mon utilisation personnelle)
Il s'organise en 2 parties : la première c'est une div avec un petit formulaire de 5 ou 6 input, et la deuxième c'est une seconde div, avec dedans, tous les formulaires envoyés. Je vous ai dessiné un http://www.zupimages.net/viewer.php?id=19/34/zf29.png
j'aimerai savoir quel langage utiliser pour faire ça et surtout que ça reste en mémoire même après reboot du pc (je rappel que je suis en offline)
Merci beaucoup pour ta réponse, donc si j'ai bien compris les données du formulaire seront stockées dans le cache de mon navigateur ? et sais-tu comment je dois faire pour que lorsque je clique sur valider, les données s'affichent sur la page sans changer l'url ? stp
if( window.fetch instanceof Function ) {
window.fetch( "urlCible" , {
/* paramétre requéte */
} ).then( response => {
/** traitement de la résponse */
} ).catch( error => {
/* traitement de l'erreur */
} ) ;
} else {
/* la function fetch n'est pas supporté sur ce navigateur */
const xhr = new XMLHttpRequest() ;
/*
* écrire une requéte ajax équivalente mais à
* l'ancienne comme les vrais :'p
*/
}
il y a un tuto AJAX & jQuery sur openclassrooms si la documentation seule est un peut "obscure" , bonne chance et enjoy !
- Edité par SamuelGaborieau3 31 août 2019 à 17:43:39
bonsoir , si lorsque tu clique sur valider il y a changement d'url ces par ce que ton button à un type submit et il et situé dans un formulaire
si tu veut annuler ce comportement par défaut tu peut ajouté un écouteur d'événement submit sur le form et faire un preventDefault sur l'argument 1 de la fonction de rappelle ,
pour illustré :
const form = document.querySelector("form#super-form") ;
form.addEventListener("submit" , function(event) {
e.preventDefault() ; // Annule le comportement par défaut
// ici c'est l'envoi des données à la source situé
// dans le action du form
// cela annule le changement de location aussi
/* suivit du traitement de donnée en javasctipt ci-dessous * const value = form["attribut-name-du-champs-de-form"].value ; localStorage.setItem('key-name' , value ) ; // pour récupéré une donnée du formulaire est la save dans le localStorage });
- Edité par SamuelGaborieau3 1 septembre 2019 à 2:28:44
Salut, donc tu veut ajouter la "ligne" dans le localStorage et l'afficher en même temps sur la page ? Voila comment faire:
//dans les querySelectors j'ai mit des exemple d'id;
var submit = document.querySelector('#submitButton');
submit.addEventListener('click', (e)=>{
//suppression du comportement par défault
e.preventDefault();
//récupération des valeurs
var name = document.querySelector('#nameInput').value;
var link = document.querySelector('#linkInput').value;
var numbers = document.querySelector('#numbersInput').value;
var select = document.querySelector('#selectInput').value;
//ajout au localStorage
if (localStorage.getItem('data') == undefined) {
localStorage.setItem('data', '[]')
}
var currentData = JSON.parse(window.localStorage.getItem('data'));
var newData = currentData;
newData.push({
name: name,
link: link,
numbers: numbers,
select: select
})
window.localStorage.setItem('data', JSON.stringify(newData))
//puis ici tu ajoute ta ligne qui vient d'etre crée dans le deuxieme div;
//sa je te laisse le faire;
//
})
Aaah ok parce que moi mes données stockées dans localStorage vont devoir ressortir dans un tableau <table> je me demandais comment faire pour que chaque donnée soit dans la bonne case après
- Edité par Thibault Delattre 7 septembre 2019 à 12:33:10
coucou, j'ai beaucoup avancé dans mon code, j'ai tout refait de A à Z parce que je veux comprendre aussi ce que je fais, mais la ça bloque. Quand je clique sur valider, le nouveau div apparaît et disparaît aussitôt, le lien dans la barre d'adresse change aussi alors que ça ne devrait pas avec ce que tu m'as donné comme code, je ne comprend pas, je vais te donner tous ce que j'ai pour que tu puisse voir par toi même si jamais j'ai fais des bêtises ou si j'ai oublié quelque chose, par contre je me doute que certaines lignes peuvent être optimisées, moins lourdes, mais pour l'instant je fais comme je comprend
PS: les infos que je rentre dans le formulaire n'y vont pas.
function valider(){
//dans les querySelectors j'ai mit des exemple d'id;
var def = document.querySelector('#button');
def.addEventListener('click', (e)=>{
//suppression du comportement par défault
e.preventDefault();
}, true);
//récupération des valeurs
var pseudo = document.querySelector('#pseudo').value;
var lvl = document.querySelector('#lvl').value;
var ndc1 = document.querySelector('#ndc1').value;
var mdp1 = document.querySelector('#mdp1').value;
var ndc2 = document.querySelector('#ndc2').value;
var mdp2 = document.querySelector('#mdp2').value;
//ajout au localStorage
if (localStorage.getItem('data') == undefined) {
localStorage.setItem('data', '[]')
}
var currentData = JSON.parse(window.localStorage.getItem('data'));
var newData = currentData;
newData.push({
pseudo: pseudo,
lvl: lvl,
ndc1: ndc1,
mdp1: mdp1,
ndc2: ndc2,
mdp2: mdp2
})
window.localStorage.setItem('data', JSON.stringify(newData))
var grp = document.createElement("div"); //Création du <div class="groupe"> et insersion dans <div id="touslesgroupes">
grp.className = 'groupe';
var tlg = document.getElementById("touslesgroupes");
tlg.appendChild(grp);
var tbl = document.createElement("table"); //Création de <table> et insersion dans <div class="groupe">
tbl.className = 'tab';
grp.appendChild(tbl);
var lgn = document.createElement("tr"); //Création du <tr> et insersion dans <table>
lgn.className = 'ligne';
tbl.appendChild(lgn);
var pseudo = document.createElement("td"); //Création du <td> PSEUDO et insersion dans <tr>
pseudo.className = 'info';
lgn.appendChild(pseudo);
var lvl = document.createElement("td"); //Création du <td> LVL et insersion dans <tr>
lvl.className = 'info';
lgn.appendChild(lvl);
var ndc1 = document.createElement("td"); //Création du <td> ndc1 et insersion dans <tr> + commentaire
ndc1.className = 'info';
lgn.appendChild(ndc1);
ndc1.innerHTML = 'coucou'; //ligne de text pour test ---> à supprimer
var mdp1 = document.createElement("td"); //Création du <td> mdp1 et insersion dans <tr>
mdp1.className = 'info';
lgn.appendChild(mdp1);
var ndc2 = document.createElement("td"); //Création du <td> ndc2 et insersion dans <tr>
ndc2.className = 'info';
lgn.appendChild(ndc2);
var mdp2 = document.createElement("td"); //Création du <td> mdp2 et insersion dans <tr>
mdp2.className = 'info';
lgn.appendChild(mdp2);
var tdbtn = document.createElement("td"); //Création du <td> pour le button et insersion dans <tr>
tdbtn.className = 'info';
lgn.appendChild(tdbtn);
var btn = document.createElement("button"); //Création du <button> et insersion dans son <td>
btn.className = 'suppr';
btn.title = 'Supprimer ce compte'
btn.innerHTML = 'X'
tdbtn.appendChild(btn);
};
- Edité par Thibault Delattre 8 septembre 2019 à 10:48:00
Salut, le problème est qu’il fait faire appendChild des <td> sur ton <tr> puis le <tr> sur <table> puis le <table> sur <div id=groupe> et enfin le <div> sur tlg.
immagine ce que ton code fait:
il créer une variable qui contient ton élément, ensuite tu y ajoute des propriétés comme className et pour finir tu fait un appendChild qui va intégrer cet élément au DOM donc il te restera quand même la variable mais tu pourra faire ce que tu veut a cette variable ça ne changera rien dans le DOM parce que cette variable a déjà été mise dans le DOM.
Un exemple de ce que tu dois faire:
Imagine que tu veut la structure suivante dans ton html:
donc faut que j'inverse tout c'est tout ? et pour recuperer les variables du localStorage pour les mettre dans les bons div ? parce que la ils ne sont nul part xD
Oui, et si j’etait toi je mettrait deja une table dans le html et ferait un boucle pour chaque item dans le js dans laquelle je créerai un tr que j’appliquerai a la table
j'ai remis dans le bon ordre ça fonctionne, a chaque fois que je clique sur valider, une ligne (vide pour le moment) se créée, par contre quand j'ajoute le code pour le localStorage, ça ne fonctionne plus. Donc maintenant j'en suis la :
document.querySelector("#button").addEventListener("click", function(event) {
//récupération des valeurs
var pseudo = document.querySelector('#pseudo').value;
var lvl = document.querySelector('#lvl').value;
var ndc1 = document.querySelector('#ndc1').value;
var mdp1 = document.querySelector('#mdp1').value;
var ndc2 = document.querySelector('#ndc2').value;
var mdp2 = document.querySelector('#mdp2').value;
var button = document.querySelector('#button').value;
//ajout au localStorage
if (localStorage.getItem('data') == undefined) {
localStorage.setItem('data', '[]')
}
var currentData = JSON.parse(window.localStorage.getItem('data'));
var newData = currentData;
newData.push({
pseudo: pseudo
lvl: lvl
ndc1: ndc1
mdp1: mdp1
ndc2: ndc2
mdp2: mdp2
button: button
})
window.localStorage.setItem('data', JSON.stringify(newData))
var tlg = document.getElementById("touslesgroupes");
var grp = document.createElement("div"); //Création du <div class="groupe"> et insersion dans <div id="touslesgroupes">;
var tbl = document.createElement("table"); //Création de <table> et insersion dans <div class="groupe">;
var trlgn = document.createElement("tr"); //Création du <tr> et insersion dans <table>;
var tdpsd = document.createElement("td"); //Création du <td> PSEUDO et insersion dans <tr>;
var tdlvl = document.createElement("td"); //Création du <td> LVL et insersion dans <tr>;
var tdndc1 = document.createElement("td"); //Création du <td> ndc1 et insersion dans <tr> + commentaire;
var tdmdp1 = document.createElement("td"); //Création du <td> mdp1 et insersion dans <tr>;
var tdndc2 = document.createElement("td"); //Création du <td> ndc2 et insersion dans <tr>;
var tdmdp2 = document.createElement("td"); //Création du <td> mdp2 et insersion dans <tr>;
var tdbtn = document.createElement("td"); //Création du <td> pour le button et insersion dans <tr>;
var btn = document.createElement("button"); //Création du <button> et insersion dans son <td>;
tdbtn.appendChild(btn);
trlgn.appendChild(tdbtn);
trlgn.appendChild(tdmdp2);
trlgn.appendChild(tdndc2);
trlgn.appendChild(tdmdp1);
trlgn.appendChild(tdndc1);
trlgn.appendChild(tdlvl);
trlgn.appendChild(tdpsd);
tbl.appendChild(trlgn);
grp.appendChild(tbl);
tlg.appendChild(grp);
grp.className = 'groupe';
tbl.className = 'tab';
trlgn.className = 'ligne';
tdpsd.className = 'info';
tdlvl.className = 'info';
tdndc1.className = 'info';
tdmdp1.className = 'info';
tdndc2.className = 'info';
tdmdp2.className = 'info';
tdbtn.className = 'info';
btn.className = 'suppr';
btn.title = 'Supprimer ce compte';
btn.innerHTML = 'X';
event.preventDefault();
}, false);
Je viens de corriger, mais ça ne change rien, ce que je rentre dans le formulaire ne se transfère pas dans mes div et quand j'actualise la page, tous les div créées disparaissent. Je me posais une question, j'ai cherche sur internet mais j'ai pas trouvé. Est il possible de créer définitivement mes div au html plutôt qu'au DOM ? ça réglerait tout
Salut je t'ai fait un exemple de ce que tu dois faire, il est fonctionnel et t'as juste a changer les noms, rajouter des inputs, faire le css, etc...
Essaye de comprendre ce que j'ai fait et si tu comprend pas quelque chose fait des recherches ou demande moi. Et si c'est pas déjà fait va voir les cours JavaScript et HTML sur openclassrooms.
//initialisation de la liste
updateDOM()
var submit = document.querySelector('#submitButton');
submit.addEventListener('click', (e)=>{
//suppression du comportement par défault
e.preventDefault();
//récupération des valeurs
var name = document.querySelector('#nameInput').value;
var link = document.querySelector('#linkInput').value;
var numbers = document.querySelector('#numbersInput').value;
var select = document.querySelector('#selectInput').value;
//ajout au localStorage
if (localStorage.getItem('data') == undefined) {
localStorage.setItem('data', '[]')
}
var currentData = JSON.parse(window.localStorage.getItem('data'));
var newData = currentData;
newData.push({
name: name,
link: link,
numbers: numbers,
select: select
})
window.localStorage.setItem('data', JSON.stringify(newData))
updateDOM();
})
//supprimer un item
function deleteLine(index){
var data = JSON.parse(window.localStorage.getItem('data'));
data.splice(index, 1);
window.localStorage.setItem('data', JSON.stringify(data));
//mise a jour de la liste:
updateDOM();
}
//fonction qui met a jour ou initialise la liste
function updateDOM(){
const data = JSON.parse(window.localStorage.getItem('data'));
var table = document.querySelector('#contentTable > tbody');
table.innerHTML = null;
for (let i = 0; i < data.length; i++) {
//on creer une ligne dans la table
var tr = document.createElement('tr');
var index = document.createElement('td');
index.innerHTML = (i + 1) + '.';
var name = document.createElement('td');
name.innerHTML = data[i].name;
var link = document.createElement('td');
link.innerHTML = data[i].link;
var numbers = document.createElement('td');
numbers.innerHTML = data[i].numbers;
var select = document.createElement('td');
select.innerHTML = data[i].select;
var button = document.createElement('input');
button.type = 'submit'
button.value = 'supprimer'
button.onclick = ()=>{
deleteLine(i);
}
tr.appendChild(index)
tr.appendChild(name);
tr.appendChild(link);
tr.appendChild(numbers);
tr.appendChild(select);
tr.appendChild(button);
table.appendChild(tr);
}
}
merci beaucoup pour ton aide, je viens d'essayer de comprendre ce que tu m'as envoyé, comme le js est nouveau pour moi je patauge, j'arrive a le comprendre grossièrement quand je le lis mais pour l’écrire de moi même de A à Z c'est atroce, je ne connais pas encore toutes les possibilité etc mais je m’entraîne beaucoup. Le code que tu m'as envoyé je vais essayer de le comprendre parce que mon projet à évolué il y a encore plus d'input etc donc je ne vais pas me contenter de faire juste le css de ce que tu m'as fait. Je reviens vers toi quand j'aurais avancé
Je passe juste pour rappeler que fetch/ajax n'a rien à faire là, c'est fait pour requêter une URL...ce qui n'a aucun sens pour une page web locale, hors ligne, ouverte en file://. L'accès au localStorage se fait directement via un simple appel de fonction, c'est standard.
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
l'utilisation de fetch où de XMLHTTPRequest pour de l'ajax pur fonctionne très bien avec une page ouverte en protocol file://
tant que la requête se fait sur une adresse distante HTTP pour ajax pur et même ws et ftp pour fetch rien ne t'empêche d'exploité une API sur une page ouverte avec file:// javascript arrivera très à requêter une URL distante ...
Oui, mais son système est local... D'après ce qu'il veut faire, il n'a pas besoin de ça. Il n'a besoin ni de serveur, ni d'API externe. Ca semble juste être un classeur de formulaires remplis, si j'ai bien compris.
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
Le localStorage est une API de stockage d'informations dans le navigateur. C'est un peu la variante propre, moderne et sans date d'expiration des cookies.
Si tu changes de navigateur, ou de machine, les données restent dans le navigateur utilisé au départ. Si tu veux un stockage entre tous les navigateurs d'une même machine, ou entre plusieurs machines, ce n'est plus un stockage local. Une page web, dans son environnement classique, n'a aucun accès au disque dur. C'est formellement interdit et il n'y a aucun moyen de contourner ça. Si tu veux ça, il faut passer par un design client-serveur où les données sont stockées coté serveur (même s'il était sur la même machine, c'est le seul à avoir le droit de faire ça).
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
et au lieu d'utiliser le localStorage on ne pourrait pas plutôt créer un fichier .txt externe ou je rentre manuellement les données, et on les récupère automatiquement sur mon site offline ? comme ça au moins les données sont enregistrées dans un fichier, parce que si j'ai un souci avec mon navigateur, je perd tout ?
PS : Merci beaucoup Kicraft, tout fonctionne à merveille, il ne me reste plus qu'à ajouter une confirmation avant suppression d'une ligne pour eviter d'en supprimer une par inadvertance, mais ça je vais le faire seul c'est pas compliqué
Comment dois-je procéder pour cette idée ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.