"Ein weiteres Element hinzufügen" Formular Funktionalität

Question

Ich habe ein Formular, mit dem ein Benutzer seine Karriere-Geschichte eingeben kann - es ist ein sehr einfaches Formular mit nur 3 Felder - Typ (Dropdown), Details (Textfeld) und Jahr (Dropdown).

Grundsätzlich möchte ich einige dynamische Funktionalität enthalten, wobei der Benutzer mehrere Elemente auf der gleichen Seite eingeben und dann alle auf einmal abschicken kann. Ich hatte eine Suche auf Google und fand einige Beispiele, aber sie alle basieren auf Tabellen - mein Aufschlag auf DIV-Tags basiert:

<div class="form-fields"> 

<div class="row"> 
    <label for="type">Type</label> 
    <select id="type" name="type"> 
     <option value="Work">Work</option> 
    </select> 
</div> 

<div class="row"> 
    <label for="details">Details</label> 
    <input id="details" type="text" name="details" /> 
</div> 

<div class="row"> 
    <label for="year">Year</label> 
    <select id="year" name="year"> 
     <option value="2010">2010</option> 
    </select> 
</div> 

</div> 

Also im Grunde die 3 DIV-Tags mit der Klasse „Zeile“ müssen dupliziert werden, oder um Dinge zu vereinfachen - die div "Formularfelder" könnten einfach dupliziert werden. Mir ist auch bewusst, dass die Eingabenamen in Array-Format konvertiert werden müssten.

Zusätzlich wird für jeden Artikel eine Schaltfläche "Entfernen" benötigt. Es wird einen Haupt-Submit-Button am unteren Rand geben, der alle Daten übermittelt.

Wer hat eine elegante Lösung dafür?

Answer 1

Ein Ansatz ist:

$('<span class="add">+</span>').appendTo('.form-fields:last'); 
$('.add').live('click', 
       function(){ 
        $('.form-fields:first') 
         .clone() 
         .insertAfter('.form-fields:last'); 
        $('.add').remove(); 
        $('<span class="add">+</span>') 
         .appendTo('.form-fields:last'); 
       }); 

JS Fiddle demo

Es ist nicht besonders hübsch, obwohl; und berücksichtigt noch nicht die Notwendigkeit für einzigartige id s.

Answer 2

Ich mache das gerade ziemlich regelmäßig. Hier ein Überblick über die großen Elemente, die ich verwende:

1. Verwenden Sie das Templating, das mit der neuesten Version von JQuery geliefert wird.

2. Übergeben Sie ein JSON-Objekt, das alle erforderlichen Daten vom Server enthält.

   var data = {Elemente: [{ID: 1234, Arbeit: "Arbeit", Details: "Details", Jahr: "2010"}]};

3. Erstellen Sie eine JavaScript-Funktion, die eine eindeutige ID für eine bestimmte Eigenschaft erstellen kann.

   Funktion GetFieldId (Typ, ID, Prop) { Rückgabe [Typ, ID, Requisite] .join ("_"); }

4. Verwenden Sie in der Vorlage die obige Funktion, um IDs zu jedem Element hinzuzufügen, mit dem der Benutzer interagieren kann. Das Erstellen von "Eigenschaften", die auf dem Objekt nicht vorhanden sind, funktioniert gut für Schaltflächen und ähnliche Elemente.

5. Erstellen Sie mithilfe von JQuery-Delegaten einen "Change" -Handler für jede Eingabe mit einer ID.

6. Ziehen Sie im Änderungshandler die ID auseinander, suchen Sie das richtige Objekt und gehen Sie zur Arbeit.

7. Um ein Objekt hinzuzufügen, erstellen Sie ein neues Objekt, werfen es in das entsprechende JSON-Array, rendern die Vorlage und legen es an der richtigen Stelle auf der Seite ab.

8. Um ein Objekt zu löschen, fügen Sie dem Objekt eine "IsDeleted" -Eigenschaft hinzu und entfernen Sie die HTML-Elemente.

9. Beim Speichern wird dieses JSON-Objekt auf den Server geschoben, wo es analysiert und entsprechende Maßnahmen ergriffen werden.

Answer 3

HTML:

<div class="form-fields"> 
    <div class="row"> 
    <label>Type 
     <select name="type[0]"> 
     <option value="Work">Work</option> 
     </select> 
    </label> 
    </div> 
    <div class="row"> 
    <label>Details 
     <input type="text" name="details[0]" /> 
    </label> 
    </div> 
    <div class="row"> 
    <label>Year 
     <select id="year" name="year[0]"> 
     <option value="2010">2010</option> 
     </select> 
    </label> 
    </div> 
</div> 

JS:

var counter = 0, formFieldsString = '<div class="form-fields"...'; 

function addNew() 
{ 
    $(formFieldString.replace('[0]', '['+(++counter)+']')).appendTo('#form-fields-parent'); 
} 

Answer 4

ich so etwas wie dies eine Kombination von jQuery und ASP.NET verwenden.

Zuerst Code ich eine Teilseite in ASP.NET (*. ASCX), die eine "Zeile" enthält. In Ihrem Fall, da die drei Elemente zusammengehören, können alle diese Elemente als eine Zeile betrachtet werden. (Sie können CSS-Stile verwenden, damit sie aussehen, als gehörten sie zusammen.) Ich platziere auch ein Bild am Ende meiner Zeile (ein Pluszeichen), damit der Benutzer, wenn er auf dieses Pluszeichen klickt, eine neue Zeile hinzufügen kann (mehr dazu in einer Sekunde).

In jedem Fall füge ich die Teilreihe der Seite hinzu, um zu beginnen. (Ich verwende eine stark typisierte Seite, so dass ich einfach die Modelle durchlaufen und die einzelne Zeile an meine Teilseite übergeben kann.) Ich zeige dies alles in einer Tabelle an. (In meinem Fall wird es tabluar Daten dargestellt, aber es muss nicht sein.)

Wie für das Pluszeichen, wenn der Benutzer darauf klickt, füge ich eine neue Zeile basierend auf der Teilseite hinzu. Etwas in dieser Richtung:

personAdd($('#addPerson'), '#personInformation'); 

function personAdd(personDiv, tableName) { 
    personDiv.live('click', function() { 
     $.ajax({ 
      url: this.href, 
      cache: false, 
      success: function (html) { $(tableName + ' > tbody:last').append(html); } 
     }); 

     $(this).replaceWith('<img alt="Delete Person" class="deleteImg" src="/Content/Images/remove_delete_cancel_clear.png" />'); 

     return false; 
    }); 
} 

Dies fügt eine neue Zeile, und ändert die vorherige Zeile zu einem „Bild löschen“ (ein rotes X), so dass vorherige Zeilen gelöscht werden können. Ich kümmere mich um das bisschen mit diesem jQuery:

// Allow rows to be deleted. 
$('.deleteImg').live('click', function() { 
    $(this).closest('tr').remove(); 
}); 

Da alles stark typisiert ist, wenn ich voran gehen und das Formular abschicken, es funktioniert ziemlich gut. Ich hoffe, dass das hilft und dich anfängt oder vielleicht jemand anderem hilft. Bitte lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.