Formulaire HTML : menu déroulant modifiable
phiper78
-
phiper78 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
phiper78 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je cherche le moyen de créer dans un formulaire HTML des menus déroulants avec un contenu modifiable par
le visiteur.
J'ai trouvé un début de solution avec javascript à cette url :
https://openclassrooms.com/forum/sujet/liste-deroulante-modifiable-par-l-utilisateur-88747
mais ce code ne permet que de modifier un menu déroulant par formulaire et j'en ai plusieurs.
D'avance merci pour votre aide.
Je cherche le moyen de créer dans un formulaire HTML des menus déroulants avec un contenu modifiable par
le visiteur.
J'ai trouvé un début de solution avec javascript à cette url :
https://openclassrooms.com/forum/sujet/liste-deroulante-modifiable-par-l-utilisateur-88747
mais ce code ne permet que de modifier un menu déroulant par formulaire et j'en ai plusieurs.
D'avance merci pour votre aide.
A voir également:
- Menu déroulant formulaire html
- Whatsapp formulaire opposition - Guide
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Formulaire de réclamation facebook - Guide
2 réponses
Je ne comprend pas ma précédente réponse n'a pas fonctionné, enfin voilà le code que j'ai adapté à ton cas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Pays</title>
<script type="text/javascript">
function ajouterOption(id_liste) {
var obj=document.getElementById(id_liste); //liste
option = document.createElement('option'); //Création d'un élément option à ajouter au select.
option.innerHTML = prompt("Valeur a rajouter"); //On lui attribue un contenu visible dans la liste avec le nom du pays de l'utilisateur.
option.value =obj.value.substring(0, 2); //Et une valeur symbolique en utilisant les deux premières lettres du pays.
obj.appendChild(option); //Et enfin on l'ajoute.
}
</script>
</head>
<body>
<form action="" method="post" name="Form_test">
<fieldset>
<select name="liste1" id="liste1">
</select>
<input type="button" value="Ajouter liste1" onClick="ajouterOption('liste1');"/>
</fieldset><fieldset>
<select name="liste2" id="liste2">
</select>
<input type="button" value="Ajouter liste2" onClick="ajouterOption('liste2');"/>
</fieldset><fieldset>
<select name="liste3" id="liste3">
</select>
<input type="button" value="Ajouter liste3" onClick="ajouterOption('liste3');"/>
</fieldset>
</form>
</body>
</html>
Bonjour,
Merci pour cette réponse Alain_42.
En effet le script de siteduzero fonctionne que si un seul menu déroulant est modifiable dans un formulaire.
Encore merci, je teste ton script de suite
Résultat de mon essai :
Une valeur est bien ajoutée dans le menu déroulant affichée. mais il n'est pas possible de récupérer cette valeur dans $_POST.
Je te jois mon code d'essai :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Essai</title>
<script type="text/javascript">
function ajouterOption(id_liste) {
var obj=document.getElementById(id_liste); //liste
option = document.createElement('option'); //Création d'un élément option à ajouter au select.
option.innerHTML = prompt("Valeur a rajouter"); //On lui attribue un contenu visible dans la liste avec le nom du pays de l'utilisateur.
option.value =obj.value.substring(0, 2); //Et une valeur symbolique en utilisant les deux premières lettres du pays.
obj.appendChild(option); //Et enfin on l'ajoute.
}
</script>
</head>
<body>
<?php
if (isset($_POST['test']) && !empty($_POST['test'])) $action = $_POST['test'];
else $action = 'debut';
switch ($action) {
case 'debut' :
?>
<form method="post" action="./index.php?titre=logistic" name="test">
<fieldset>
<p><label class="float" for="lieu">Nom :</label>
<select name="liste1" id="liste1">
<option value=""></option>
<option value="nom1">Nom1</option>
<option value="nom2">Nom2</option>
<option value="nom3">Nom3</option>
</select>
<input type="button" value="Ajouter liste1" onClick="ajouterOption('liste1');"/>
</p>
<p><label class="float" for="genre">Genre :</label>
<select name="liste2" id="liste2">
<option value=""></option>
<option value="genre1">Genre1</option>
<option value="genre2">Genre2</option>
<option value="genre3">Genre3</option>
<option value="genre4">Genre4</option>
</select>
<input type="button" value="Ajouter liste2" onClick="ajouterOption('liste2');"/>
</p>
<p><label class="float" for="genre">Type :</label>
<select name="liste3" id="liste3">
<option value=""></option>
<option value="type1">Type1</option>
<option value="type2">Type2</option>
<option value="type3">Type3</option>
</select>
<input type="button" value="Ajouter liste3" onClick="ajouterOption('liste3');"/>
</p>
<input type="submit" value="Envoyer" name="test" title="Envoyer" />
</fieldset>
</form>
<?php
break;
case 'Envoyer' :
echo '<p><a href="./index.php">Retour</a></p>';
echo '<pre>'; print_r($_POST); echo '</pre>';
break;
default:
break;
}
?>
</body>
</html>
Merci pour cette réponse Alain_42.
En effet le script de siteduzero fonctionne que si un seul menu déroulant est modifiable dans un formulaire.
Encore merci, je teste ton script de suite
Résultat de mon essai :
Une valeur est bien ajoutée dans le menu déroulant affichée. mais il n'est pas possible de récupérer cette valeur dans $_POST.
Je te jois mon code d'essai :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Essai</title>
<script type="text/javascript">
function ajouterOption(id_liste) {
var obj=document.getElementById(id_liste); //liste
option = document.createElement('option'); //Création d'un élément option à ajouter au select.
option.innerHTML = prompt("Valeur a rajouter"); //On lui attribue un contenu visible dans la liste avec le nom du pays de l'utilisateur.
option.value =obj.value.substring(0, 2); //Et une valeur symbolique en utilisant les deux premières lettres du pays.
obj.appendChild(option); //Et enfin on l'ajoute.
}
</script>
</head>
<body>
<?php
if (isset($_POST['test']) && !empty($_POST['test'])) $action = $_POST['test'];
else $action = 'debut';
switch ($action) {
case 'debut' :
?>
<form method="post" action="./index.php?titre=logistic" name="test">
<fieldset>
<p><label class="float" for="lieu">Nom :</label>
<select name="liste1" id="liste1">
<option value=""></option>
<option value="nom1">Nom1</option>
<option value="nom2">Nom2</option>
<option value="nom3">Nom3</option>
</select>
<input type="button" value="Ajouter liste1" onClick="ajouterOption('liste1');"/>
</p>
<p><label class="float" for="genre">Genre :</label>
<select name="liste2" id="liste2">
<option value=""></option>
<option value="genre1">Genre1</option>
<option value="genre2">Genre2</option>
<option value="genre3">Genre3</option>
<option value="genre4">Genre4</option>
</select>
<input type="button" value="Ajouter liste2" onClick="ajouterOption('liste2');"/>
</p>
<p><label class="float" for="genre">Type :</label>
<select name="liste3" id="liste3">
<option value=""></option>
<option value="type1">Type1</option>
<option value="type2">Type2</option>
<option value="type3">Type3</option>
</select>
<input type="button" value="Ajouter liste3" onClick="ajouterOption('liste3');"/>
</p>
<input type="submit" value="Envoyer" name="test" title="Envoyer" />
</fieldset>
</form>
<?php
break;
case 'Envoyer' :
echo '<p><a href="./index.php">Retour</a></p>';
echo '<pre>'; print_r($_POST); echo '</pre>';
break;
default:
break;
}
?>
</body>
</html>