Formulaire HTML : menu déroulant modifiable

phiper78 -
phiper78 Messages postés 2 Statut Membre - 10 sept. 2009 à 13:45

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.

Configuration: Windows XP
Firefox 3.5.2

Afficher la suite

2 réponses

Alain_42 Messages postés 5413 Statut Membre 904

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>

Réponse 2 / 2
phiper78 Messages postés 2 Statut Membre

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>
0

Formulaire HTML : menu déroulant modifiable

2 réponses

Discussions similaires

Newsletters