Ajout d'un élément dans une liste

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Emilie
Messages : 3
Enregistré le : 21 nov. 2018, 13:31

Ajout d'un élément dans une liste

Message par Emilie » 21 nov. 2018, 13:54

Bonjour! Je suis débutante en programmation et je suis sur un projet dont je n'arrive pas en m'en sorti.
Voici mon code de formulaire
J'arrive à ajouter mais j'actualise la valeur ne se trouve plus dans ma liste. Aidez moi


<form method="POST" action="dbhabilitation.php">


<label><strong>Applicatifs</strong>
<select name ="nom_applicatif" required="" onChange="alert('Ajout : '+this.options[this.selectedIndex].text+'nValeur : '+this.options[this.selectedIndex].value)">
<option value="" selected="selected"></option>
<option value="win">Windows</option>
<option value="message">Messagerie</option>
<option value="internet">Internet</option>
<option value="win">Windows</option>
<option value="ORION">ORION</option>
<option value="VSIGN/VSCAN">VSIGN/VSCAN</option>
<option value="WEBCLEARING">WEBCLEARING</option>
<option value="WIN FTP">WIN FTP</option>
<option value="MONEY GRAM">MONEY GRAM</option>

</select>

</label>
<input type="button" name="Ajout" onclick="Augmenter(this.form)">
<input type="text" name="ajouter" value="">

<SCRIPT LANGUAGE="JavaScript">
function Augmenter(form) {
var ajout=new Option(form.ajouter.value);
form.nom_applicatif.options[form.nom_applicatif.options.length]=ajout;
}

Avatar du membre
webmaster
Administrateur du site
Messages : 58
Enregistré le : 28 févr. 2017, 15:19

Re: Ajout d'un élément dans une liste

Message par webmaster » 21 nov. 2018, 14:00

C'est le fonctionnement normal...

Le script JS de la page modifie le contenu du document en cours de consultation
Une actualisation de la page reinitialise tout le document avec son code source d'origine

Pour prendre en compte l'action de l'utilisateur sur le formulaire, il faut :
1 - envoyer au serveur l'action effectuée (ici l'ajout d'un élément)
2 - enregistrer sur le serveur (dans la base de données) le nouvel élément
3 - utiliser les éléments de la base de donnée pour reconstruire la liste du formulaire

On n'est plus du tout dans la programmation JS basique. Mais on entre dans la programmation complete avec les trois éléments du web :
- interface utilisateur avec HTML/JS/CSS
- serveur avec PHP ou Node.js par exemple
- base de données
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Emilie
Messages : 3
Enregistré le : 21 nov. 2018, 13:31

Re: Ajout d'un élément dans une liste

Message par Emilie » 22 nov. 2018, 06:41

Bonjour ! Et comment on le fait aide moi stp

klimbo
Messages : 2
Enregistré le : 07 févr. 2019, 08:52

Re: Ajout d'un élément dans une liste

Message par klimbo » 07 févr. 2019, 22:13

Emilie a écrit :
21 nov. 2018, 13:54
Bonjour! Je suis débutante en programmation et je suis sur un projet dont je n'arrive pas en m'en sorti.
Voici mon code de formulaire
J'arrive à ajouter mais j'actualise la valeur ne se trouve plus dans ma liste Pnr Status TextNow VPN. Aidez moi


<form method="POST" action="dbhabilitation.php">


<label><strong>Applicatifs</strong>
<select name ="nom_applicatif" required="" onChange="alert('Ajout : '+this.options[this.selectedIndex].text+'nValeur : '+this.options[this.selectedIndex].value)">
<option value="" selected="selected"></option>
<option value="win">Windows</option>
<option value="message">Messagerie</option>
<option value="internet">Internet</option>
<option value="win">Windows</option>
<option value="ORION">ORION</option>
<option value="VSIGN/VSCAN">VSIGN/VSCAN</option>
<option value="WEBCLEARING">WEBCLEARING</option>
<option value="WIN FTP">WIN FTP</option>
<option value="MONEY GRAM">MONEY GRAM</option>

</select>

</label>
<input type="button" name="Ajout" onclick="Augmenter(this.form)">
<input type="text" name="ajouter" value="">

<SCRIPT LANGUAGE="JavaScript">
function Augmenter(form) {
var ajout=new Option(form.ajouter.value);
form.nom_applicatif.options[form.nom_applicatif.options.length]=ajout;
}
Bonjour,

La solution donnée par webmaster est une excellente solution pour garder les valeurs pour d'autres accès (même à partir d'autres navigateurs).

Comment le faire ? Il faut remplacer le button par un input de type submit qui envoie les données à une page PHP.

Si vous voulez rester avec JS côté client, vous pouvez utiliser le stockage local disponible avec HTML5.

Répondre