High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Formulaire HTML : menu déroulant modifiable

Dernière réponse le 10 sep 2009 à 13:45:04 phiper78, le 9 sep 2009 à 22:02:36 
 Signaler ce message aux modérateurs

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 :
http://www.siteduzero.com/...
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

Meilleures réponses pour « formulaire HTML : menu déroulant modifiable » dans :
Les formulaires HTML VoirIntérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains...
Posez votre question Répondre

1

Alain_42, le 10 sep 2009 à 11:43:13

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épondre à Alain_42

2

 phiper78, le 10 sep 2009 à 13:45:04

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>

   
Répondre à phiper78
Posez votre question Répondre
Ils ont besoin de votre aide