Zeile hinzufügen, um für Mitglieder zu bilden?

Question

Ich versuche ein Anmeldeformular zu erstellen, mit dem der Benutzer seine Mitglieder hinzufügen kann. Um dies schnell zu tun, habe ich ein Basisformular mit einer Eingabe erstellt, und wenn die Eingabetaste auf der Tastatur gedrückt wird, wird eine neue Zeile erstellt.

Ich habe versucht, die on e-Taste in der Eingabe, aber ich kann nur diese zur Warnung eher als duplizieren, hier ist mein Formular.

<form id="contactForm" novalidate> 
    <table id="members" style="width:100%"> 
     <tr> 
      <td> 
       <div class="row control-group"> 
        <div class="form-group col-xs-12 floating-label-form-group controls"> 
         <label>Member Name</label> 
         <input type="text" class="form-control" placeholder="Member Name" id="member"> 
         <p class="help-block text-danger"></p> 
        </div> 
       </div> 
      </td>  
     </tr>  
    </table>  
    <br> 
    <div id="success"></div> 
    <div class="row"> 
     <div class="form-group col-xs-12"> 
      <button type="submit" class="btn btn-success btn-lg pull-right">Next</button> 
     </div> 
    </div> 
</form> 

Answer 1

Ich würde empfehlen, ein JavaScript-Framework dafür zu verwenden. Es gibt mehrere, die fähig sind, aber ich würde Ember.js

Querverweis diese Frage SO, empfehlen, die die gleiche Frage wie bei Ihnen ist, außer im Rahmen des Embers.js Rahmen:

Ember: Adding input fields dynamically on click and reading the new data

Es beschreibt das Klicken auf eine Schaltfläche, um ein neues Feld anzuzeigen, aber das gleiche kann mit dem Füllen eines Felds getan werden.

In der Hoffnung, dass dies hilft.

Answer 2

Es ist kein zusätzliches JavaScript-Framework erforderlich. Moderne Browser können dies mit HTML5 und nativem Javascript lösen. Hier ist ein kleines Beispiel.

<template id="my-row"> 
    <div> 
     <label>Member Name</label> 
     <input type="text" placeholder="Member Name" name="member[]" required> 
    </div> 
</template> 

Mit HTML5 können Sie das Template-Tag verwenden. Es wurde für Ihren Zweck gemacht. Der Vorlageninhalt wird nicht auf dem Bildschirm angezeigt. Es ist nur ein unsichtbares Markup. Also schauen wir mal, wie das Javascript aussehen würde.

<script> 
    var template = document.getElementById('my-row'); 
    var parent = document.querySelector('#members td'); 
    document.addEventListener('keyup', function(event) { 
     event.preventDefault(); 
     if (event.key == 'Enter') { 
      var clone = document.importNode(template.content, true); 
      parent.appendChild(clone); 
     }  
    }); 
</script> 

Zum Beispiel dieses Stück JavaScript-Code tut alles, was Sie brauchen. Die HTML5-Vorlage wird beim Drücken der Eingabetaste als untergeordnet eingefügt.

Die Sache, mit der Sie umgehen müssen: Das HTML5-Vorlagen-Tag wird von älteren Browsern unterstützt. Schließlich müssen Sie mit Polymorphen umgehen, um HTML5-Vorlagen-Tags in älteren Browsern wie dem Internet Explorer 11 zu behandeln.