Comment utiliser JavaScript pour développer un formulaire HTML?

Question

Je crée une application web simple avec laquelle un utilisateur peut créer un message avec des fichiers joints.

multiple html file inputs with javascript link http://img38.imageshack.us/img38/4474/attachments.gif

que "joindre des fichiers supplémentaires" lien ne fonctionne pas encore. Il doit ajouter un contrôle d'entrée de fichier supplémentaire au formulaire chaque fois que vous cliquez dessus.

je besoin d'une méthode JavaScript addanotherfileinput() pour remplacer l'ancre cliqué:

 <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a> 

Avec cette nouvelle ligne de table, fichier d'entrée et d'ancrage:

 <input type="file" name="Attachment1" id="Attachment1" class="textinput" /> 
    </td> 
</tr> 
<tr> 
    <td></td> 
    <td> 
     <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a> 

Et incrémenter aussi numéro: pièce jointe 2, pièce jointe 3, pièce jointe 4, etc.

Comment puis-je faire cela?

Answer 1

Vous pouvez utiliser le DOM pour insérer dynamiquement les entrées de fichier

var myTd = /* Get the td from the dom */ 

var myFile = document.createElement('INPUT'); 
myFile.type = 'file' 
myFile.name = 'files' + i; // i is a var stored somewhere 
i++; 

myTd.appendChild(myFile); 

Vous pouvez aussi utiliser ce

http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html

Answer 2

Il pourrait y avoir une meilleure façon, mais je l'ai ce côté client par créer un ensemble d'éléments de formulaire HTML puis masquer/afficher les lignes en utilisant JavaScript pour mettre à jour la classe CSS.

EDIT: Je vais laisser ceci ici comme méthode alternative mais j'aime l'idée d'ajouter des éléments INPUT à travers le DOM mieux.

Answer 3

Vous ne voulez probablement pas remplacer l'ancre, il suffit d'insérer quelque chose en face d'elle.

J'utilise Prototype pour des choses comme ça, car il y a beaucoup d'incohérences dans les navigateurs, en particulier autour des formulaires et des tables.

En utilisant Prototype, il ressemblerait à quelque chose comme ceci:

function insertFileField(element, index) { 
    element.insert({ 
     before: "<input type='file' name='Attachment" + index + " class='textinput'>" 
    }); 
} 

// And where you're hooking up your `a` element (`onclick` is very outdated, 
// best to use unubtrustive JavaScript) 
$('attachlink').observe('click', function(event) { 
    event.stop(); 
    insertFileField(this, this.up('form').select('input[type=file]').length + 1); 
}); 

... le bit à la fin trouve le formulaire contenant le lien, trouve combien input s de type file il y a, et ajoute un pour l'index.

Il existe également d'autres moyens, par l'intermédiaire du constructeur Element fourni par Prototype, mais le texte fonctionne assez bien (en fait, il est généralement beaucoup plus rapide).

Il serait similaire, bien que légèrement différent, avec jQuery, MooTools, YUI, Glow, ou l'un des nombreux autres frameworks JavaScript.