tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von javaDeveloper2011
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
231
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 08.10.11 19:43 #1
    Sarah18 Sarah18 ist offline Grünschnabel
    Registriert seit
    Oct 2011
    Beiträge
    1
    Hallo liebes Forum, mein erster Post und gleich eine Frage *G*

    Ich will ein Formular schreiben mit Eingabefeldern. Da das ganze recht schlank bleiben soll, sind am Anfang nur wenige Eingabefelder da, braucht man zusätzliche, kann man diese mit einem "+" hinzufügen, bzw "-"wieder entfernen.

    Beispiel:
    Vorname [ ]+-
    Nachname [ ]+-

    Klickt man nun auf das "+" bekommt man ein zweites "vorname" Input Feld, bzw auf "-" löscht er genau dieses Feld wieder.

    Denke das ganze sollte über rein html/Javascript klappen, was ich aus anderen Tutorials von hier gelesen habe ist DOM ein heißer Tipp ala "document.getElementById('DivName').innerHTML +="
     
    Zitieren Zitieren
  2. 09.10.11 17:52 #2
    Avatar von javaDeveloper2011
    javaDeveloper2011 javaDeveloper2011 ist offline Mitglied Brokat
    Registriert seit
    Feb 2011
    Beiträge
    445
    Blog-Einträge
    5
    Hi,

    hab dir nen Demo geschreben, es wird auch schon berücksichtigt, dass immer 1 Textfeld bleiben soll.

    Da es ja auch "-" giebt, würde document.getElementById('DivName').innerHTML +="
    an die Grenzen stoßen, ich habe mit appendChild und removeChild gearbeitet.

    Es wird auch das name-Attribut unique gesetzt
    => keine Probleme beim Übertragen der Formulardaten per GET / POST

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

    <html>
 
    <head>
        <script type="text/javascript">
            function addVorname() {
                textfeld = document.createElement("input");
                textfeld.type = "text";
                textfeld.name = "vorname" + document.getElementById('wrapperVornamen').getElementsByTagName("input").length;
                document.getElementById('wrapperVornamen').appendChild(textfeld);
 
                if(document.getElementById('wrapperVornamen').getElementsByTagName("input").length < 2){
                    document.getElementById('minusButtonVorname').style.disabled = true;        
                }
                else{
                    document.getElementById('minusButtonVorname').disabled = false;
                }
            }
            function removeVorname() {
                document.getElementById('wrapperVornamen').removeChild(
                    document.getElementById('wrapperVornamen').getElementsByTagName("input")[document.getElementById('wrapperVornamen').getElementsByTagName("input").length-1]
                );
 
                if(document.getElementById('wrapperVornamen').getElementsByTagName("input").length < 2){
                    document.getElementById('minusButtonVorname').disabled = true;
                }
                else{
                    document.getElementById('minusButtonVorname').disabled = false;
                }
            }
 
            function addNachname() {
                textfeld = document.createElement("input");
                textfeld.type = "text";
                textfeld.name = "nachname" + document.getElementById('wrapperNachnamen').getElementsByTagName("input").length;
                document.getElementById('wrapperNachnamen').appendChild(textfeld);
 
                if(document.getElementById('wrapperNachnamen').getElementsByTagName("input").length < 2){
                    document.getElementById('minusButtonNachname').style.disabled = true;       
                }
                else{
                    document.getElementById('minusButtonNachname').disabled = false;
                }
            }
            function removeNachname() {
                document.getElementById('wrapperNachnamen').removeChild(
                    document.getElementById('wrapperNachnamen').getElementsByTagName("input")[document.getElementById('wrapperNachnamen').getElementsByTagName("input").length-1]
                );
 
                if(document.getElementById('wrapperNachnamen').getElementsByTagName("input").length < 2){
                    document.getElementById('minusButtonNachname').disabled = true;
                }
                else{
                    document.getElementById('minusButtonNachname').disabled = false;
                }
            }
        </script>
    </head>
 
<body>
 
    <form>
 
        Vornamen: 
        <span id="wrapperVornamen">
            <input type="text" name="vorname" />
        </span>
        <button type="button" onclick="addVorname();">+</button>
        <button type="button" onclick="removeVorname();" id="minusButtonVorname" disabled="true">-</button>
 
        <br />
 
        Nachnamen: 
        <span id="wrapperNachnamen">
            <input type="text" name="nachname" />
        </span>
        <button type="button" onclick="addNachname();">+</button>
        <button type="button" onclick="removeNachname();" id="minusButtonNachname" disabled="true">-</button>
 
        <br />
 
        <input type="submit" value="Los!" />
 
    </form>
 
</body>
 
</html>

    Working example bei jsFiddle: http://jsfiddle.net/UnGgq/2/
    Geändert von javaDeveloper2011 (09.10.11 um 21:14 Uhr) Grund: Im IE6 hatte das "-" vorher nicht funktioniert
    Roflmao bedankt sich. 
    Zitieren Zitieren
« Zwei actions, ein Formular | <tr> per Javascript anzeigen lassen »

Ähnliche Themen

  1. Richtige Syntax bei Operatorüberladung, wann sind "friend", "const", "&" nötig?
    Von mrs_schokokeks im Forum C/C++
    Antworten: 4
    Letzter Beitrag: 25.08.10, 19:13
  2. Formular - Wenn "selected" trotzdem per onChange="submit()" abschicken möglich?
    Von Atalión im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 12.10.09, 16:31
  3. Frage: "Dynamisches" Menü
    Von shadow2 im Forum PHP
    Antworten: 3
    Letzter Beitrag: 23.05.08, 17:03
  4. Eingabe in der timeline: "time*100" - bei Effekt "turbulentes Versetzen"-"Evolution"
    Von MTMonline im Forum Videoschnitt, Videotechnik & -produktion
    Antworten: 2
    Letzter Beitrag: 25.04.08, 09:49
  5. "dynamisches Formular"
    Von ParadiseCity im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 26.11.04, 10:14