Entrée de formulaire HTML dynamique

Est-il possible de créer un formulaire HTML qui répond au nombre d'éléments que l'utilisateur souhaite envoyer?Entrée de formulaire HTML dynamique

C'est, ce que j'ai maintenant:

<form ...> 
    <select ...> 
     <option>1</option> 
     <option>2</option> 
     ... 
    </select> 
    *** 
</form>

Lorsque l'utilisateur sélectionne l'une des options, *** devrait avoir

<input type="text" ...>

apparaissent le nombre de fois l'utilisateur sélectionné. Autrement dit, si l'utilisateur a sélectionné 5 parmi les options, l'utilisateur devrait voir 5 options de saisie. S'il change d'avis 2 à la place, la page doit être mise à jour en conséquence pour ne montrer que 2 options de saisie.

===== [EDIT] =====

J'ai changé le code pour avoir l'entrée est juste le texte. Le code que j'ai ne fonctionne pas. Il ne met pas à jour le nombre de champs de saisie.

<script type="text/javascript"> 
<!-- 
function updateOptions(nvars) 
{ 
    var n = nvars; 
    while(n>0) { 
     var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>"; 
     var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>"; 
     newdiv1.appendTo("#bloo"); 
     newdiv2.appendTo("#bloo"); 
     n--; 
    } 
} 
//--> 
</script> 

<h3>Create a table in the test db!<h3> 
<form name="f1" method="POST" action="createTable.php"> 
     Name of Table: <input type="text" name="table-name"><br> 
     No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br> 
     <div id="bloo"></div> 
</form>

Cela a fonctionné quand j'avais un document.write au lieu d'un appendTo, mais je veux essentiellement la page le restent les mêmes pour enregistrer les champs d'entrée supplémentaires après que l'utilisateur modifie la valeur dans le numvars domaine.

Source

2009-11-17 user5243421

C'est une bonne idée quand vous voulez que l'utilisateur puisse télécharger un nombre arbitraire de fichiers ou quelque chose comme ça. Vous pouvez le faire avec Javascript:

Vous avez déjà un DIV vide près du SELECT
Bind une fonction à l'événement « onchange » sur l'élément de sélection
Dans la fonction, lire la valeur de l'élément SELECT et:
- Vider le DIV
- Créer un e quivalent nombre de < INPUT type = "text" > dans la DIV

Avez-vous besoin code? Si oui, le prototype est-il OK?

OK, désolé pour le retard, beaucoup de travail à faire ces derniers temps.

Ce qui suit devrait être suffisant pour vous faire une idée. Vous devrez étudier JS cependant, je ne sais même pas ce que vous faites avec les choses appendTo dans votre question.

<html> 
    <head> 
    </head> 
    <body> 
     <form> 
      <select id="num" value="1"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
      </select> 

      <div id="container"> 
       <p> 
        <input type="text" name="var-name" /> 
        <input type="text" name="var-type" /> 
       </p> 
      </div> 
     </form> 


     <script type="text/javascript"> 
      var selectElm = document.getElementById('num'); 
      var containerElm = document.getElementById('container'); 

      var update = function() { 
       containerElm.innerHTML = ''; 
       for (var i = 0, l = selectElm.value; i < l; ++i) { 
        containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>'; 
       } // add a number of couples of <input> equal to selectElm.value 
      } 

      //the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers. 
      var listen, evt; 
      if (document.attachEvent) { 
       listen = 'attachEvent'; 
       evt = 'onchange' ; 
      } else { 
       listen = 'addEventListener'; 
       evt = 'change'; 
      } 
      try { 
       selectElm[listen](evt, update); 
      } catch (e) { 
       selectElm[listen](evt, update, false); 
      } 
      // You do the same in Prototype with a single line: 
      // selectElm.observe('change', update); 
      // jQuery also requires only a single line of code. 

     </script> 
    </body> 
</html>

Source

2009-11-17 08:15:51

Si cela ne prend pas trop de temps, du code me permettrait d'économiser du temps. – user5243421

Je viens d'apprendre javascript, donc je ne suis pas sûr de ce qu'est Prototype. – user5243421

Désolé, journée de travail au travail, je vais voir si je peux écrire quelque chose plus tard. –

Oui utilisez l'événement onChange de votre champ de saisie déroulant et afficher/masquer vos champs de saisie.

Source

2009-11-17 08:13:04

Entrée de formulaire HTML dynamique

Répondre

Questions connexes