mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 11:45 Benutzername: Passwort: Auto-Login

Thema: [Javascript] Inputfelder hinzufügen / entfernen vom 07.09.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [Javascript] Inputfelder hinzufügen / entfernen
Seite: Zurück  1, 2, 3, 4  Weiter
Autor Nachricht
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 07.09.2007 19:50
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zeussi
Threadersteller

Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 12:04
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 12:21
Titel

Antworten mit Zitat Zum Seitenanfang

Sag doch einfach deutlich was du erreichen möchtest und zeige Quelltext usw. bevor
sich noch jemand deinem Problem annimmt und seine Zeit verschwendet weil du dann
doch eigentlich etwas anderes willst.

Ansonsten:

http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#allgemeines
http://de.selfhtml.org/javascript/objekte/node.htm


Zuletzt bearbeitet von m am Sa 08.09.2007 12:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zeussi
Threadersteller

Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 12:38
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 12:52
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zeussi
Threadersteller

Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 13:29
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Thumbs up!* *Thumbs up!*

Falls du das mit dem GetByID mir noch zeigen könntest, wärst du mein Held! * Ich bin unwürdig *

lg,
Stephan


Zuletzt bearbeitet von Zeussi am Sa 08.09.2007 13:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 08.09.2007 13:54
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zeussi
Threadersteller

Dabei seit: 13.07.2007
Ort: München - Freising
Alter: -
Geschlecht: Männlich
Verfasst So 09.09.2007 10:11
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Programmierung


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.