Willkommen in der Webstatt Zum Webstatt Blog und Stories
leo am 23.03.06 10:48

hallo allerseits,
brauche hilfe bei folgendem problem:

es sollen bei einem onclick event immer wieder 2 select-felder in ein div hinzugefügt werden.

vom html-quellcode soll das dann so ungefähr aussehen

<div id="zeiten">
<select size="1" name="tag[]" id="id"><option>Montag</option></select>
<select size="1" name="zeit[]" id="id"><option>12:00</option></select>
<span onclick='removeElement("id")'>entfernen</span><br>
</div>

das soll halt nun so oft wie gewünscht ausführbar sein, es muss "id" also immer dynamisch mitgeneriert werden.
bei klick auf den span soll diese "zeile" bestehend aus den 2 select elementen wieder verschwinden.

ich finde überhaupt keinen richtigen ansatzpunkt, evtl kann mir das wer erklären oder per link nen beispiel zeigen.

bin für jeden hinweis dankbar & bedanke mich schonmal für die hilfe,
gruß leo

netcup.de Warum gibt es hier Werbung?
milahu milahu am 23.03.06 16:44

previousSibling() ist die Methode deiner Träume :D

leo am 24.03.06 08:42

huhu
hmmm jap das hatte ich mir gestern noch angeguckt - hat mich aber nicht richtig weitergebracht.

wie kann ich das möglichst komfortabel lösen?

vielen dank an milahu soweit :)
gruß, leo

Rene Rene am 24.03.06 16:06

reicht es nicht den Krempel einfach mit innerHTML in das div einzufügen?

Die ID darf nur einmalig im html-dokument vorkommen.

milahu milahu am 24.03.06 16:32

Hier was zum anfassen.
<script type="text/javascript">
function removeElement (b)
{
var c = document.getElementById ("zeiten"); // container
var i = 0;
while (i<2)
{
var n = b.previousSibling; // element vor entfernen-button
if (n.nodeType == 1) i++; // nur element-knoten zaehlen, nicht aber whitespace
c.removeChild (n);
}
}
</script>

<div id="zeiten">
<select size="1" name="tag[]"><option>Montag</option></select>
<select size="1" name="zeit[]"><option>12:00</option></select>
<span onclick='removeElement(this)'>entfernen</span><br>
</div>

leo am 27.03.06 16:30

huhu,
danke an dich, milahu.
hab mich dann doch für was für mich einfacheres entschieden:

http://temp.leonic.de/addelement.html

benutzt, wie von rene vorgeschlagen, innerHTML.
meine js kenntnisse sind recht bescheiden, deswegen brauche ich nochmal hilfe:

wenn ich jetzt mehrere uhrzeiten hinzufüge, dann irgendwas änder (tag und / oder zeit) und dann nochmal ne uhrzeit hinzufüg, springen alle auswahlfelder auf "Montag" und "12:00 Uhr"

woran könnte das liegen?

gruß, leo


[COLOR=orangered]//edit: wenn ich das richtig sehe, tritt der fehler nur im FF auf, nicht im IE.[/COLOR]

Rene Rene am 27.03.06 18:06

try this one :) :
sicher noch ..ähm..optimierungsbedürftig. Funktioniert aber in beiden Browsern.


<!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-DE">
<head>
<title>js~</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="content">
<script type="text/javascript">
Tage = new Array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag');
Zeiten = new Array('12:00','14:00');

fieldnr = 0;

function addElement2() {
// Fieldset-Definition
Feld = document.createElement("fieldset");
IdAttr = document.createAttribute("id");
IdAttr.nodeValue="field_"+fieldnr;
Feld.setAttributeNode(IdAttr);
document.getElementById('zeiten').appendChild(Feld);

// Tag-Feld
TagAuswahl = document.createElement("select");
for(i=0;i<Tage.length;i++) {
TagAuswahl.options[TagAuswahl.length] = new Option(Tage[i],Tage[i],false,false);
}
TagAuswahl.name="tag[]";
Feld.appendChild(TagAuswahl);

// Zeit-Feld
ZeitAuswahl = document.createElement("select");
for(i=0;i<Zeiten.length;i++) {
ZeitAuswahl.options[ZeitAuswahl.length] = new Option(Zeiten[i],Zeiten[i],false,false);
}
ZeitAuswahl.name="zeit[]";
Feld.appendChild(ZeitAuswahl);

// Link - Entfernen
Feld.innerHTML += "<a href=\'javascript:removeElement(\"field_"+fieldnr+"\")\'>entfernen</a>";
fieldnr++;
}

function removeElement(SelectNum) {
var d = document.getElementById('zeiten');

var oldSelect = document.getElementById(SelectNum);
d.removeChild(oldSelect);
}
</script>
<form action="#" method="post">
<fieldset>
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement2();">Uhrzeit hinzufügen</a></p>
<div id="zeiten"></div>
</fieldset>
</form>
</div>
</body>
</html>

leo am 27.03.06 18:34

wunderbar - vielen dank für deine arbeit, rene!

hier nochmal für alle online zum angucken und rumspielen:
http://temp.leonic.de/addelement_2.html

gruß, leo

leo am 30.03.06 21:57

guten abend,
durfte grad folgendes ernüchternd feststellen:
der IE sendet die auswahl felder nicht mit!

http://temp.leonic.de/addele.php
mal zum testen - der firefox handzahm, der IE mal wieder in bestem licht.
für den code siehte 2 posts hier drüber.

gruß, leo

Rene Rene am 31.03.06 01:48

hmpf..dreckiger %$$§$% IE ...

naja..nich so schlimm. IE will, dass wenn man das Attribut Name für das Objekt bestimmt, dass Name großgeschrieben is. Also dacht' ich halt TagAuswahl.Name="tag[]" ...
macht aber der Firefox nicht mit :D
also anstatt TagAuswahl.name=..... bzw. ZeitAuswahl.name=.. :
TagAuswahl.setAttribute("Name","tag[]"); bzw.
ZeitAuswahl.setAttribute("Name","zeit[]");

hier nochmal das Javascript:

<script type="text/javascript">
Tage = new Array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag');
Zeiten = new Array('12:00','14:00');

fieldnr = 0;

function addElement2() {
// Fieldset-Definition
Feld = document.createElement("fieldset");
IdAttr = document.createAttribute("id");
IdAttr.nodeValue="field_"+fieldnr;
Feld.setAttributeNode(IdAttr);
document.getElementById('zeiten').appendChild(Feld);

// Tag-Feld
TagAuswahl = document.createElement("select");
for(i=0;i<Tage.length;i++) {
TagAuswahl.options[TagAuswahl.length] = new Option(Tage[i],Tage[i],false,false);
}
TagAuswahl.setAttribute("Name","tag[]");
Feld.appendChild(TagAuswahl);

// Zeit-Feld
ZeitAuswahl = document.createElement("select");
for(i=0;i<Zeiten.length;i++) {
ZeitAuswahl.options[ZeitAuswahl.length] = new Option(Zeiten[i],Zeiten[i],false,false);
}
ZeitAuswahl.setAttribute("Name","zeit[]");
Feld.appendChild(ZeitAuswahl);

// Link - Entfernen
Feld.innerHTML += "<a href=\'javascript:removeElement(\"field_"+fieldnr+"\")\'>entfernen</a>";
fieldnr++;
}

function removeElement(SelectNum) {
var d = document.getElementById('zeiten');

var oldSelect = document.getElementById(SelectNum);
d.removeChild(oldSelect);
}
</script>


Gruß
René

leo am 31.03.06 16:04

mein lieblingsbrowser...groß und kleinschreibung - es ist nich zu fassen.

vielen danke an dich, rene :)

gruß, leo

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt