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

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

Marsh Posté le 01-12-2007 à 17:43:28    

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Ajouter une action</title>
  6. <link rel="stylesheet" type="text/css" href="view.css" media="all">
  7. <script type="text/javascript" src="view.js"></script>
  8. <script type="text/javascript" src="calendar.js"></script>
  9. </head>
  10. <body id="main_body" >
  12. <img id="top" src="top.png" alt="">
  13. <div id="form_container">
  15.  <h1><a>Ajouter une action</a></h1>
  16.  <form id="form_17774" class="appnitro"  method="post" action="">
  17.     <div class="form_description">
  18.   <h2>Ajouter une action</h2>
  19.   <p></p>
  20.  </div>
  21.   <ul >
  23.     <li id="li_1" >
  24.  <label class="description" for="element_1">Intitulé de l'action </label>
  25.  <div>
  26.   <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
  27.  </div>
  28.  </li>  <li id="li_2" >
  29.  <label class="description" for="element_2">Date de début </label>
  30.  <span>
  31.   <input id="element_2_1" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text"> /
  32.   <label for="element_2_1">MM</label>
  33.  </span>
  34.  <span>
  35.   <input id="element_2_2" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text"> /
  36.   <label for="element_2_2">DD</label>
  37.  </span>
  38.  <span>
  39.    <input id="element_2_3" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text">
  40.   <label for="element_2_3">YYYY</label>
  41.  </span>
  43.  <span id="calendar_2">
  44.   <img id="cal_img_2" class="datepicker" src="calendar.gif" alt="Pick a date.">
  45.  </span>
  46.  <script type="text/javascript">
  47.   Calendar.setup({
  48.   inputField  : "element_2_3",
  49.   baseField    : "element_2",
  50.   displayArea  : "calendar_2",
  51.   button   : "cal_img_2",
  52.   ifFormat  : "%B %e, %Y",
  53.   onSelect  : selectDate
  54.   });
  55.  </script>
  57.  </li>  <li id="li_3" >
  58.  <label class="description" for="element_3">Date de fin </label>
  59.  <span>
  60.   <input id="element_3_1" name="element_3_1" class="element text" size="2" maxlength="2" value="" type="text"> /
  61.   <label for="element_3_1">MM</label>
  62.  </span>
  63.  <span>
  64.   <input id="element_3_2" name="element_3_2" class="element text" size="2" maxlength="2" value="" type="text"> /
  65.   <label for="element_3_2">DD</label>
  66.  </span>
  67.  <span>
  68.    <input id="element_3_3" name="element_3_3" class="element text" size="4" maxlength="4" value="" type="text">
  69.   <label for="element_3_3">YYYY</label>
  70.  </span>
  72.  <span id="calendar_3">
  73.   <img id="cal_img_3" class="datepicker" src="calendar.gif" alt="Pick a date.">
  74.  </span>
  75.  <script type="text/javascript">
  76.   Calendar.setup({
  77.   inputField  : "element_3_3",
  78.   baseField    : "element_3",
  79.   displayArea  : "calendar_3",
  80.   button   : "cal_img_3",
  81.   ifFormat  : "%B %e, %Y",
  82.   onSelect  : selectDate
  83.   });
  84.  </script>
  86.  </li>  <li id="li_4" >
  87.  <label class="description" for="element_4">Description </label>
  88.  <div>
  89.   <textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
  90.  </div>
  91.  </li>  <li id="li_5" >
  92.  <label class="description" for="element_5">Nombre de tâches </label>
  93.  <div>
  94.  <select class="element select small" id="element_5" name="element_5">
  95.   <option value="1" selected="selected">1</option>
  96. <option value="2" >2</option>
  97. <option value="3" >3</option>
  98. <option value="4" >4</option>
  99. <option value="5" >5</option>
  101.  </select>
  102.  </div>
  103.  </li>
  105.     <li class="buttons">
  106.       <input type="hidden" name="form_id" value="17774" />
  107.      
  108.    <input id="saveForm" class="button_text" type="submit" name="submit" value="Valider" />
  109.  </li>
  110.   </ul>
  111.  </form>
  112.  <div id="footer">
  113.   Created by <a href="http://revohsalf.com">revohsalf</a> and <a href="http://myfayce.com">myfayce</a>
  114.  </div>
  115. </div>
  116. <img id="bottom" src="bottom.png" alt="">
  117. </body>
  118. </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
Reply

Marsh Posté le 01-12-2007 à 17:43:28   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed