Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 07.09.2007 19:50
Titel
|
|
|
Das ganze ist eigentlich nicht schwer. Das Div Element samt Inhalt wird geklont
und das Input Element durch ein neues ersetzt und anschließend eingefügt:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zeussi</title>
<script type="text/javascript">
<!--
function clone(obj)
{
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
}
function remove_this(obj)
{
obj.parentNode.removeChild(obj);
}
//-->
</script>
</head>
<body>
<form method="" action="" id="test">
<div>
<label>E-Mail: </label><input name="textfeldname[]" type="text" />
<a href="#" onclick="remove_this(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone(this)">noch eins</a>
</form>
</body>
</html> |
Details kannst du zum Beispiel bei Selfhtml nachlesen.
Zuletzt bearbeitet von m am Fr 07.09.2007 19:50, insgesamt 1-mal bearbeitet
|
|
|
|
|
Zeussi
Threadersteller
Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht:
|
Verfasst Sa 08.09.2007 12:04
Titel
|
|
|
Hm ja, schön und gut, nur was mache ich, wenn ich 2 divs direkt ansprechen möchte?
Irgendwie funktioniert das nicht, wenn ich sie über IDs anspreche.
also
Code: |
Versuch 1 - gescheitert:
[...]
var tmpNode = obj.parentNode.getElementByID('test')[0].cloneNode(true);
[...]
<div id="test">
[...]
</div>
Versuch 2 - gescheitert:
[...]
var bereich = document.getElementById("test");
var tmpNode = bereich.obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
[...]
<div id="test">
[...]
</div>
//-->
</script>
|
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Zeussi
Threadersteller
Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht:
|
Verfasst Sa 08.09.2007 12:38
Titel
|
|
|
Nun gut.
Ich möchte bis auf max. 5 Input-Felder je DIV die Input-Felder inklusive Löschen-Link erweitern können.
Wie erwähnt, soll "Löschen" und "Hinzufügen" ein Link sein.
Problem:
Setze ich 3 DIV-Felder mit Beschränkung 5, kann ich DIV-1 bsp: drei Input-Felder generieren, bei DIV-2 ein Input-Feld generieren und bei DIV-3 auch ein Input-Feld,... das wäre ja nicht Sinn und Zweck des Ganzem.
Setze ich es auf Beschränkung 15 - kann ich in DIV-1 15 Inputs rein hauen und bei den anderen keine mehr... deswegen habe ich mir gedacht, hey, wieso spricht man es nicht mit der DIV-ID an... aber daran bin ich leider gescheitert.
Code: | var count_start = 1;
function clone_this(objButton)
{
if (count_start < 5)
{
[...]
count_start++;
}
}
function remove_this(obj)
{
obj.form.removeChild(obj.parentNode);
count_start--;
} |
Danke für die Links, das mit den Nodes hab ich mir schon angeschaut, in einem Beispiel haben sie es bei selfHTML so gemacht, wie ich oben, nur bei mir klappt es hald nicht, steig da nicht so durch..
Hier das Beispiel wo sie es so gemacht haben:
Code: | <script type="text/javascript">
var bereich = document.getElementById("bereich");
var absaetze = bereich.getElementsByTagName("p");
var ueberschriften = bereich.getElementsByTagName("h2");
|
lg,
Stephan
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 08.09.2007 12:52
Titel
|
|
|
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zeussi</title>
<script type="text/javascript">
<!--
var count = 0;
function clone(obj)
{
if(count == 5) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count++;
}
function remove_this(obj)
{
obj.parentNode.removeChild(obj);
count--;
}
//-->
</script>
</head>
<body>
<form method="" action="" id="test">
<div>
<label>E-Mail: </label><input name="textfeldname[]" type="text" />
<a href="#" onclick="remove_this(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone(this)">noch eins</a>
</form>
</body>
</html> |
|
|
|
|
|
Zeussi
Threadersteller
Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht:
|
Verfasst Sa 08.09.2007 13:29
Titel
|
|
|
Ja genau, soweit hab ichs auch x)
Jetzt habe ich unten ein 2tes DIV eingefügt, und schon teilen die DIVs sich die 5, und nicht jedes DIV alleine zählt bis 5 hoch.
Kurz: jedes einzelne DIV sollte max. 5 Inputs haben
Deshalb müsste ich die DIVs doch per ID einzeln ansprechen? Oder sehe ich das falsch? Nur wie? Habs versucht wie oben gepostet, nur ging es nicht.
lg,
Stephan
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zeussi</title>
<script type="text/javascript">
<!--
var count = 0;
function clone(obj)
{
if(count == 5) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count++;
}
function remove_this(obj)
{
obj.parentNode.removeChild(obj);
count--;
}
//-->
</script>
</head>
<body>
<form method="" action="" id="test">
<div>
<label>E-Mail: </label><input name="textfeldname[]" type="text" />
<a href="#" onclick="remove_this(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone(this)">noch eins</a>
<div>
<label>E-Mail: </label><input name="textfeldname[]" type="text" />
<a href="#" onclick="remove_this(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone(this)">noch eins</a>
</form>
</body>
</html> |
Hier eine Lösung meines Problems (ist hald unschön):
Code: | var count_1 = 0;
var count_2 = 0;
function clone_1(obj)
{
if(count_1 == 4) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count_1++;
}
function remove_this_1(obj)
{
obj.parentNode.removeChild(obj);
count_1--;
}
function clone_2(obj)
{
if(count_2 == 4) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count_2++;
}
function remove_this_2(obj)
{
obj.parentNode.removeChild(obj);
count_2--;
} |
Vielen, vielen Dank an m, dass du dir so viel Zeit und Mühe gemacht hast, mir zu antworten, es war genau das, was ich gesucht habe
Falls du das mit dem GetByID mir noch zeigen könntest, wärst du mein Held!
lg,
Stephan
Zuletzt bearbeitet von Zeussi am Sa 08.09.2007 13:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 08.09.2007 13:54
Titel
|
|
|
Ich verstehe gerade immer noch nicht was genau du vorhast? Zeig mal
wie der Quelltext zu Anfang aussieht und was dann genau geklont werden
soll. Irgendwie macht das ganze so wie du es gerade andeutest für mich
keinen Sinn.
|
|
|
|
|
Zeussi
Threadersteller
Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht:
|
Verfasst So 09.09.2007 10:11
Titel
|
|
|
Hier ist der ganze Code.
Sinn besteht darin, dass ich beliebig viele DIVs in einem Formular haben kann, die alle nur bis zu einer bestimmten Begrenzung jeweils sich klonen.
Problem:
Bei ersten mal geht es gut, er zählt jeweils bis 5 Inputs.
Löscht man aber beim unteren DIV ein Input-Feld, so kann ich es nicht unten hinzufügen, sondern nur im oberen DIV.
Ich vermute, dass er einfach das erstbeste DIV nimmt und es dort hinzufügen lässt. hmmm??
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zeussi</title>
<script type="text/javascript">
<!--
var count_1 = 0;
var count_2 = 0;
function clone_1(obj)
{
if(count_1 == 4) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count_1++;
}
function remove_this_1(obj)
{
obj.parentNode.removeChild(obj);
count_1--;
}
function clone_2(obj)
{
if(count_2 == 4) return;
var tmpNode = obj.parentNode.getElementsByTagName('div')[0].cloneNode(true);
tmpNode.getElementsByTagName('a')[0].style.display = 'inline';
var tmpElm = document.createElement('input');
tmpElm.type = tmpNode.getElementsByTagName('input')[0].type;
tmpElm.name = tmpNode.getElementsByTagName('input')[0].name;
tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
obj.parentNode.insertBefore(tmpNode,obj);
count_2++;
}
function remove_this_2(obj)
{
count_2--;
obj.parentNode.removeChild(obj);
}
//-->
</script>
</head>
<body>
<form method="" action="" id="test">
<div>
<label>E-Mail: </label><input name="textfeldname[]" type="text" />
<a href="#" onclick="remove_this_1(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone_1(this)">noch eins</a>
<div>
<label>E-Mail: </label><input name="textfeldname2[]" type="text" />
<a href="#" onclick="remove_this_2(parentNode)" style="display: none; ">löschen</a>
</div>
<a href="#" onclick="clone_2(this)">noch eins</a>
</form>
</body>
</html>
|
Zuletzt bearbeitet von Zeussi am So 09.09.2007 10:34, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
[Javascript] Multiple form upload / input felder hinzufügen
Splines bei 3Ds Max hinzufügen
[TYPO3] RTE - Schriftgröße 9 pt hinzufügen?
Soundkanal im director hinzufügen?
Gif-Headerdaten hinzufügen per Console
Ebook Cover hinzufügen
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|