Selectauswahl weiteres Textfeld&Select einblenden

MikeDe

MikeDe

Mitglied
Ich habe ein Textfeld und eine Selectauswahl (hat immer gleichen Inhalt) und würde gerne wenn ich die Selectauswahl betätige (Auswahl) ein weiteres "identischen" Textfeld & Selectauswahl einblendet.

Diese Möglichkeiten würden gehen:

1. als eine unendlich Schleife, so das eine unbestimmte Zahl an Textfeldern&Selectauswahlen möglich sind! (wäre super wenn das gehen würde)

2. Das ich diese Kombination Textfeld/Selectauswahl in ein blindes div schreibe und dies dann nach der Selectauswahl nur nach und nach einblende (rund 4-5 Stück).

Jemand da ne Lösung auf Lager?
 
Hallo...

das erstere geht in DOM-Browsern recht bequem:)

Dort kannst du per cloneNode() von einen beliebigen Knoten(Seitenelement) eine Kopie erstellen und einfügen, wo du willst:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--

function clone(obj)
{
objClone=obj.parentNode.cloneNode(true);
obj.form.appendChild(objClone);
}

//-->
</script>
</head>
<body>
<form>
 <div>
  <input type="text">
  <select onchange="clone(this)">
   <option>a</option>
   <option>b</option>
   <option>c</option>
  </select>
 </div>
</form>
</body>
</html>
Die beiden betreffenden Elemente sind in einem <div> verpackt...dieses <div> soll "geklont" werden(ist einfacher..da muss man nicht beide Elemente einzeln klonen).

Der Funktion wird per this die auslösende Liste als Objekt übergeben.
Der Elternknoten(parentNode) dieser Liste ist das <div>...welcher sodann per cloneNode() "kopiert" wird.

per obj.form.appendChild(objClone); wird diese Kopie an das Ende des Formulars, in welchem sich die Liste befindet, angehängt.
Das wars schon:)
 
Das funktioniert ja wunderbar, muss ich gleich mal Einbauen. Mir ist noch nicht so richtig klar wie ich dann dem erzeugten Textfeld un der Auswahl einen Namen/ID zuweise um sie dann richtig verschicken zu können aber ich probier erstmal!

Danke!
 
Mir ist noch nicht so richtig klar wie ich dann dem erzeugten Textfeld un der Auswahl einen Namen/ID zuweise um sie dann richtig verschicken zu können aber ich probier erstmal!
Zum Vergrößern anklicken....
....notiere hinter dem Namen []....
also bspw.
Code: 
<select name="liste[]">
...dann werden alle Formularfelder übermittelt.
 
Vielen Danke, das hatte ich auch schon probiert, es gibt aber noch zwei hacken:


1) Wenn ich die Auswahl tätige kommt eine neue Kombination, super aber wenn ich dann nochmals was auswähle bzw bei einer Auswahl was ändere wird wieder eine Kombination erstellt, kann man das verhindern?

2) Die Kombination wird immer darunter erzeugt, was schlecht ist weil noch weitere Elemente darunter folgen.

mal ein Beispiel:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--

function clone(obj)
{
objClone=obj.parentNode.cloneNode(true);
obj.form.appendChild(objClone);
}

//-->
</script>
</head>
<body>
<form>
<div id="box1" style="border:1px solid #ff3300; height:auto;">
 <div style="border:1px solid #000;">
  <input type="text">
  <select onchange="clone(this)">
   <option>a</option>
   <option>b</option>
   <option>c</option>
  </select>
 </div>
</div>
<div style="background:#ff4411; height:50px; width:200px;">&nbsp;</div>
</form>
</body>
</html>

Die erzeugte Kombination müsste in der "box1" bleiben!

Hast da noch einen Tip für ein js Newbie?
 
Zuletzt bearbeitet:
Hi,

definiere Dir eine Variable, anhand derer Du ermitteln kannst, ob der Knoten schon
gecloned wurde.

Soll der neue Knoten neben dem Ursprungsknoten erscheinen, muss er an das
Element mit der ID box1 angehängt werden - nicht an das Formular. Ausserdem
muss eine CSS-Definition erstellt werden, in der DIVs innerhalb des box1-Containers
als inline-Elemente deklariert werden.

In Deinem Head könntest Du folgendes notieren:
Code: 
<script type="text/javascript">
<!--
var boolHasBeenCloned = false;

function clone(obj){
    // Funktion verlassen, falls bereits gecloned wurde
    if(boolHasBeenCloned == true) return;

    objClone=obj.parentNode.cloneNode(true);
    document.getElementById('box1').appendChild(objClone);
    boolHasBeenCloned = true;  // Markieren, dass gecloned wurde
}

//-->
</script>
<style type="text/css">
    <!--
    #box1 div{display: inline;}
    -->
</style>
fatalus - das mit dem Knoten clonen kannte ich bisher noch nicht. Klasse erklärt,
besten Dank.

Ciao
Quaese
 
Richtig gut Quaese, ich hatte selbst im Bsp ein CSS-Fehler. Das mit dem unterm Formular habe ich auch so mitbekommen aber ich habs nicht hinbekommen das zu ändern. Ich hab die sachen von Fatalus auch erstmal nachgelesen, aber ich hab ja kaum ahnung von js.

Dieses Makieren mit einer Variablen verstehe ich nicht ganz und will auch nicht so richtig funktionieren da ich nun nicht weiter als 2 Erzeugungen komm, dann blockt dann die if-Prüfung.

Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
#box1 {
	border:3px solid #000;
}
-->
</style>

<script type="text/javascript">
<!--
var boolHasBeenCloned = false;

function clone(obj){
    // Funktion verlassen, falls bereits gecloned wurde
    if(boolHasBeenCloned == true) return;

    objClone=obj.parentNode.cloneNode(true);
    document.getElementById('box').appendChild(objClone);
    boolHasBeenCloned = true;  // Markieren, dass gecloned wurde
}

//-->
</script>
</head>
<body>
<form>
<div id="box1">
 <div id="box" style="border:1px solid #000;">
  <input type="text">
  <select onchange="clone(this)">
   <option>a</option>
   <option>b</option>
   <option>c</option>
  </select>
 </div>
</div>
<div style="background:#ff4411; height:50px; text-align:center; width:200px;">TESTELEMENT</div>
</form>
</body>
</html>
 
Kann man nicht ein Array mit einem Code der erstelten Felder anlegen und abfragen ob schon geklont oder nicht?
 
Hi,

hoffentlich habe ich Dich richtig verstanden. Du willst, dass jede Select-Box genau
einmal gecloned wird. Die entstandenen Kind-Selects sollen ebenfalls wieder genau
einmal clone-bar sein.

Hierzu wird jedem neu erstellten Knoten eine ID gegeben. Diese wird in einen Array
geschrieben. Soll nun ein Knoten gecloned werden, so wird zunächst im Array
nachgesehen, ob bereits ein Duplizieren stattgefunden hat.
Code: 
var arrCloned = new Array();  // Test-Array
var intZaehler = 1;  // Zählvariable

function clone(obj){
    // Test-Array durchlaufen
    for(i=0; i<arrCloned.length; i++){
        // Falls der Knoten schon gecloned wurde
        if(arrCloned[i] == obj.parentNode.id)
            return;
    }
    // Gleichen Knoten wie den Elternknoten erstellen
    objClone = obj.parentNode.cloneNode(true);
    // ID des duplizierten Knotens in Array schreiben
    arrCloned[(intZaehler-1)] = obj.parentNode.id;
    // Neuen Knoten eine ID zuweisen
    objClone.id = "id" + intZaehler;
    // Knoten in Dokumentbaum einhängen
    document.getElementById('box1').appendChild(objClone);
    // Zähler inkrementieren
    intZaehler++;
}
Solltest Du dem parent-Div mit id="box" ein CSS zuweisen, so wird das in
den neuen Knoten nicht mehr funktionieren. Stattdessen könntest Du eine CSS-Klasse
definieren und mit class="box" zuweisen.

Das erste DIV-Element muss in jedem Fall eine ID besitzen!

Ciao
Quaese
 
Hammer! Könnte Dich küssen :-)

Funktioniert prima und mit einem Array lag ich nicht mal falsch. Ich muss mir unbedingt mal einbissi Javascript angucken.

Nochmals Danke euch beiden !
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück