[JavaScript] Input Feld hinzufügen / entfernen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Hapablap, 29. Oktober 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. Oktober 2009
    Input Feld hinzufügen / entfernen

    Hi,

    Ich hab versucht mit dem JS Framework Prototype es hinzubekommen, dass ich beliebig viele Inputs per Klick hinzufügen kann. Da ich durchnummeriere (Antwort 1, Antwort 2, usw) sollte da irgendwie ein logisches System dahinter sein.
    Gestern saß ich ziemlich lange dran und bin nach dem Prinzip vorgegangen, dass ich erst alle Values sammle, dann alle Inputs lösche (die ich vorher gezählt habe), alle neu anlege und eins hinzufüge. Wenn man sich jedoch blöd anstellt, kann man bei folgendem Beispiel Daten verlieren:

    Feld: | Value:
    1 | Hallo
    2 | leer
    3 | leer
    4 | noch mal hallo

    Wenn man hier Feld 2 und Feld 3 löscht, danach wieder ein Feld hinzufügt, gehen die Daten von Feld 4 verloren. Ich bin mir sicher, es muss eine Musterlösung für so ein Problem geben, da sowas ja häufig vorkommt.

    Ich hab mal das Grundgerüst geschrieben (Prototype wird benötigt) und hoffe, mir kann jemand helfen, so dass ich Antworten entfernen und hinzufügen kann, ohne dass die Nummerierung durcheinander kommt oder Daten verloren gehen.

    Bisher:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
     <head>
     <title>Test</title>
     <script type="text/javascript" src="prototype.js"></script>
     <script type="text/javascript">
     var id;
     var element;
     var anzahlAntworten;
     
     function getAnzahlAntworten() {
     return $('antworten').childElements().length;
     }
     
     function removeAntwort(id) {
     $('antwort-' + id).remove();
     }
     
     function addAntwort() {
     anzahlAntworten = getAnzahlAntworten();
     id = anzahlAntworten+1;
     element = '<div class="antwort" id="antwort-' + id + '"><label for="antwort-' + id + '">Antwort ' + id + '</label><input type="text" value="" name="antwort[]"/><a href="#" onclick="removeAntwort(' + id + ')">Löschen</a></div>';
     
     $('antworten').insert({
     'bottom' : element
     });
     }
     </script>
     </head>
     <body>
     <form>
     <div id="antworten">
     <div class="antwort" id="antwort-1">
     <label for="antwort-1">Antwort 1</label><input type="text" value="" name="antwort[]"/>
     <a href="#" onclick="removeAntwort(1)">Löschen</a>
     </div>
     </div>
     <a href="#" onclick="addAntwort()">Antwort hinzu</a>
     </form>
     </body>
    </html>
     
  2. 29. Oktober 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Input Feld hinzufügen / entfernen

    hi,

    ich weiß du machst das in prototype.
    damit komm ich nicht zurecht. daher hab ich das mal mit mootools gemacht.
    vielleicht hilft dir das dennoch weiter.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script src="../js/moo1.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    var anzahlAntworten = 1;
    function addAntwort() {
     anzahlAntworten ++;
     id = anzahlAntworten;
     var myAnchor = new Element('div', {
     'class': 'antwort',
     'id': 'antwort-' + id,
     'html': '<label for="antwort-' + id + '">Antwort ' + id + '</label><input type="text" value="" name="antwort[]"/><a href="#" onclick="removeAntwort(' + id + ')">Löschen (id: '+id+')</a>'
     }).inject($('antworten'));
     
     resetLable ();
    }
    function removeAntwort(id) {
     $('antwort-' + id).dispose();
     resetLable ();
    }
    function resetLable (){
     $$('.antwort').each(function(el, i){
     ellable = el.getElement('label');
     ellable.innerHTML = 'Antwort ' + (i+1);
     });
    }
    
    </script>
    </head>
    
    <body>
    
    <form>
     <div id="antworten">
     <div class="antwort" id="antwort-1">
     <label for="antwort-1">Antwort 1</label><input type="text" value="" name="antwort[]"/><a href="#" onclick="removeAntwort(1)">Löschen (id: 1)</a>
     </div>
     </div>
    <a onclick="addAntwort()">Antwort hinzu</a>
    </form>
    
    </body>
    </html>
    
    eigentlich zähle ich die elemente nur hoch und belasse deren id.
    es wird nur der text im label überschrieben.

    // edit
    hier noch die mootools version mit der ich arbeite
    No File | xup.in
     
  3. 29. Oktober 2009
    AW: Input Feld hinzufügen / entfernen

    Das ist genial, danke! Ich hab da wohl viel zu kompliziert gedacht -.-
    Ich habs hier noch mal für Prototype, jedoch gibts sicher einige Methoden in Prototype, die das ganze erleichtern oder dass man es eben professioneller macht (z.B. label ansprechen statt childElements()[0]).
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
     <head>
     <title>Test</title>
     <script type="text/javascript" src="prototype.js"></script>
     <script type="text/javascript">
     var anzahlAntworten = 1;
     
     function addAntwort() {
     anzahlAntworten++;
     id = anzahlAntworten;
     
     element = '<div class="antwort" id="antwort-' + id + '"><label for="antwort-' + id + '">Antwort ' + id + '</label><input type="text" value="" name="antwort[]"/><a href="#" onclick="removeAntwort(' + id + ')">Löschen</a></div>';
    
     $('antworten').insert({
     'bottom' : element
     });
     
     resetLable();
     }
     function removeAntwort(id) {
     $('antwort-' + id).remove();
     resetLable();
     }
     function resetLable(){
     $('antworten').childElements().each(function(el, i){
     ellable = el.childElements()[0];
     ellable.innerHTML = 'Antwort ' + (i+1);
     });
     }
     </script>
     </head>
     <body>
     <form>
     <div id="antworten">
     <div class="antwort" id="antwort-1">
     <label for="antwort-1">Antwort 1</label><input type="text" value="" name="antwort[]"/>
     <a href="#" onclick="removeAntwort(1)">Löschen</a>
     </div>
     </div>
     <a href="#" onclick="addAntwort()">Antwort hinzu</a>
     </form>
     </body>
    </html>
    Vielen Dank noch mal!

    - Closed -
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.