[JS] Ajout auto d'un champ input-text selon valeur d'une listbox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] Ajout auto d'un champ input-text selon valeur d'une listbox

revohsalf

http://revohsalf.com

Hép le monde

Je ne touche à du Javascript que depuis 24h ( :sweat: ) et je n'arrive pas à tout comprendre et faire marcher...

J'ai comme formulaire de base celui ci:

Code (généré automatiquement :sol: ) :

Code :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajouter une action</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>Ajouter une action</a></h1>
<form id="form_17774" class="appnitro" method="post" action="">
<div class="form_description">
<h2>Ajouter une action</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Intitulé de l'action </label>
<div>
<input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_2" >
<label class="description" for="element_2">Date de début </label>
<span>
<input id="element_2_1" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text"> /
<label for="element_2_1">MM</label>
</span>
<span>
<input id="element_2_2" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text"> /
<label for="element_2_2">DD</label>
</span>
<span>
<input id="element_2_3" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text">
<label for="element_2_3">YYYY</label>
</span>
<span id="calendar_2">
<img id="cal_img_2" class="datepicker" src="calendar.gif" alt="Pick a date.">
</span>
<script type="text/javascript">
Calendar.setup({
inputField : "element_2_3",
baseField : "element_2",
displayArea : "calendar_2",
button : "cal_img_2",
ifFormat : "%B %e, %Y",
onSelect : selectDate
});
</script>
</li> <li id="li_3" >
<label class="description" for="element_3">Date de fin </label>
<span>
<input id="element_3_1" name="element_3_1" class="element text" size="2" maxlength="2" value="" type="text"> /
<label for="element_3_1">MM</label>
</span>
<span>
<input id="element_3_2" name="element_3_2" class="element text" size="2" maxlength="2" value="" type="text"> /
<label for="element_3_2">DD</label>
</span>
<span>
<input id="element_3_3" name="element_3_3" class="element text" size="4" maxlength="4" value="" type="text">
<label for="element_3_3">YYYY</label>
</span>
<span id="calendar_3">
<img id="cal_img_3" class="datepicker" src="calendar.gif" alt="Pick a date.">
</span>
<script type="text/javascript">
Calendar.setup({
inputField : "element_3_3",
baseField : "element_3",
displayArea : "calendar_3",
button : "cal_img_3",
ifFormat : "%B %e, %Y",
onSelect : selectDate
});
</script>
</li> <li id="li_4" >
<label class="description" for="element_4">Description </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li> <li id="li_5" >
<label class="description" for="element_5">Nombre de tâches </label>
<div>
<select class="element select small" id="element_5" name="element_5">
<option value="1" selected="selected">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="17774" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Valider" />
</li>
</ul>
</form>
<div id="footer">
Created by <a href="http://revohsalf.com">revohsalf</a> and <a href="http://myfayce.com">myfayce</a>
</div>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>

Selon la valeur de la list box "Nombre de tâches" je voudrais donc afficher un nouveau champ input text
Si Nombre de tâches=1 je veux que il y ait un nouvel input text
Si Nbre tâches =2 => 2 input text
etc etc jusqua 5 input text si le nombre de taches = 5

J'ai vu sur quelques doc onchange pour tester le choix dans une selectbox et createElement + appendChild pour ajouter un input text mais je ne sais absolument pas les utiliser comme il faut [:armelanuel]

Quelqu'un veut bien m'aider svp ? :jap: :jap:

Message édité par revohsalf le 01-12-2007 à 17:43:58

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] Ajout auto d'un champ input-text selon valeur d'une listbox

Sujets relatifs
lire un fichier txt et sauvegarder certaine valeur dans un tableau int	[php/mysql] Ajout d'un prix variable dans le panier
Changer la valeur d'un cookie	calendrier et calcul auto de montants sur bulletin reservation
[php]Pdf créer des zones editable (comme un <input> par ex)	optimisation du code, tester valeur avant attribution ?
[RESOLU] pb Listbox + condition	Listbox et événement lié au scroller
les navigateurs et <?xml-stylesheet type="text/xsl" ...
Plus de sujets relatifs à : [JS] Ajout auto d'un champ input-text selon valeur d'une listbox

Page générée en 0.077 secondes