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ß xyz-118
previousSibling() ist die Methode deiner Träume :D
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 xyz-145 soweit :)
gruß, xyz-118
reicht es nicht den Krempel einfach mit innerHTML in das div einzufügen?
Die ID darf nur einmalig im html-dokument vorkommen.
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>
huhu,
danke an dich, xyz-145.
hab mich dann doch für was für mich einfacheres entschieden:
http://temp.xyz-118nic.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ß, xyz-118
[COLOR=orangered]//edit: wenn ich das richtig sehe, tritt der fehler nur im FF auf, nicht im IE.[/COLOR]
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>
wunderbar - vielen dank für deine arbeit, rene!
hier nochmal für alle online zum angucken und rumspielen:
http://temp.xyz-118nic.de/addelement_2.html
gruß, xyz-118
guten abend,
durfte grad folgendes ernüchternd feststellen:
der IE sendet die auswahl felder nicht mit!
http://temp.xyz-118nic.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ß, xyz-118
xyz-82f..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é
mein lieblingsbrowser...groß und kleinschreibung - es ist nich zu fassen.
vielen danke an dich, rene :)
gruß, xyz-118
