Formular dynamisch erweitern.

Vielen Dank!

jetzt funktioniert es soweit perfekt! Hmm hoffentlich kommt mein dhtml Buch bald - ich will langsam auch mal selber auf solche Ideen kommen bzw. genau verstehe, was ich da mache...

noch mal vielen Dank für die Hilfe!
 
Vielen DANK! Das clonen funktioniert nun wunderbar! Langsam aber sicher fange ich sogar an zu verstehen was ich da abschreibe... :D Wenn jetzt noch mein dhtml Buch kommt kann ich richtig anfangen...

Mein letzter Schritt für dieses Formular ist nun noch einen löschen Button einzufügen (wie im oberen Beispiel).

PHP: 
<div style="visibility:hidden; display:none"> 
  <div id="new_passage"><table name="cloneTable">
    <tr>
      <td>test</test><td>
      <input type="text" name="test[]"></input>
      </td>
      <td rowspan="2"><a href="#" onclick="javascript:remove_this(this); return false;">LÖSCHEN</a>
      </td>   
    </tr>
      <td>test2</test>
     <td><input type="text" name="test2[]"></input></td>
    </tr>
  </table></div>
 </div>
<div>
  <input value="mehr" onclick="javascript:clone_this(this, 'new_passage');"  type="button">
  </input> 
</div>

Bei der Funktion zu remove_this() scheitere ich aber schon wieder ich habe mir mit hilfe von alert schon rausgesucht, dass ich 5 mal parentNode verwenden muss um zum richtigen div tag zu kommen unter dem alles gelöscht werden soll. Wenn es dann allerdings ums löschen selber geht (die funktion ist wohl removeChild() ) dann hängt es bei mir wieder an mehreren Stellen. Hat hier zufällig auch noch jemand eine gute Idee bzw. ein code - schnippsel der mir weiterhelfen kann? (am besten ohne id´s anzusprechen - da ich die Felder ja clone könnte das zu Problemen führen, da diese auch gleich sind...)

Liebe Grüße
 
Es mag etwas albern aussehen(dasmit 5xparentNode hast du ja schon rausbekommen), ist aber tatsächlich so:suspekt:
Code: 
function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}

die Syntax von removeChild ist
Code: 
elternknoten.removeChild(Kindknoten);

die Funktion macht also folgendes:
Code: 
objLink[link].parentNode[td].parentNode[tr].parentNode[tbody].parentNode[table].parentNode[div].removeChild(objLink[link].parentNode[td].parentNode[tr].parentNode[tbody].parentNode[table]);


Zu beachten dabei ist, dass du bei Tabellen u.U. einen Elterknoten weiter hoch gehen musst, als du im Dokument stehen hast.... die Browser erzeugen in der Knotenstruktur von sich aus einen <TBODY>, wenn keiner vorhanden ist.
 
Danke! :) Da mein Buch weiter auf sich warten lässt muss ich euch noch mal nerven (ich hätte es neu bestellen sollen diese Gebrauchtmärkte sind einfach viel zu langsam...)

Ich habe die Funktion nun eingebaut. Leider erhalte ich immer die JS Meldung, dass ein Fehler auf der Seite ist. In den Details steht dann was von ungültigem Argument. Was kann das sein? Die Debug infos insbesondere die Zeilenangaben scheinen fast so brauchbar zu sein wie bei php :D (in der Umgebung von Zeile xy :-) )

So sieht meine Seite (Ausschnitt) gerade aus. (sorry für die Struktur, ist via php erzeugt daher etwas durcheinander...)

Code: 
<form method="post" action="new_or_edit_policy_capture_forward.php?rap_id=24">
<input type="hidden" name="rap_id" value="24"></input>
<br />
<div id="hidden" style="visibility:hidden; display:none">
  <div id="new_passage"><table width="95%" name="cloneTable">
    <tr>
      <td class="hellgrautab" colspan="2">
      NEW_POLICY_PASSAGE      </td>
      <td class="helltab" rowspan="3">
      <a href="#" id="delete_button" onclick="javascript:remove_this(this); return false;">
      <img src="images/trash.gif" border="0" alt="LOESCHEN"></a>
      </td>
    </tr>
    <tr>
      <td class="helltab">
              CHAPTER:&nbsp;
            <input type="hidden" name="new_pointer_character[]" value="1"></input>
      <input type="text" size="3" name="new_pointer_character_value[]" value="000" onfocus="kill_content(this, 000)"></input>
      </td>
      <td class="helltab">
      <input type="text" size="91" name="new_passage_headline[]" value="PASSAGE_HEADLINE" onfocus="kill_content(this, 'PASSAGE_HEADLINE')"></input>
      </td>
    </tr>
    <tr>
      <td class="helltab" colspan="2">
      <textarea cols="85" rows="5" name="new_passage[]" onfocus="kill_content(this, 'INSERT_THE_PASSAGE_HERE')">INSERT_THE_PASSAGE_HERE</textarea>
      </td>
    </tr>
  </table></div>
</div>
<div>
  <input class="button" value="FURTHER_PASSAGE" onclick="javascript:clone_this(this,'new_passage');" type="button"></input>
</div>
<br />
<div>
  <input class="button" type="submit" value="SUBMIT"></input>
</div>
Die funktion sieht gerade so aus:
Code: 
function remove_this(objLink)
{
  objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode.parentNode);
}

Kann hier jemand auf anhieb sehen, was da falsch läuft? Die ID des Remove Buttons möchte ich jedoch nicht ansprechen, da diese objekte geclont werden und somit mehrfach auf einer Seite vorkommen können :D

Vielen Dank!
 
*mist* du hast recht. Dank dir! Jetzt ist meine Seite schon fast fertig *freu* dhtml fängt an mir zu gefallen. Hoffentlich kommt mein Buch bald *freu*

Eine Schlussfrage zum besseren Verständnis. Wie müsst so eine Löschfunktion nun aussehen wenn ich den Inhalt eines div - tags mit einer bestimmten ID löschen möchte.

Sprich ich habe ein ewig langes dokument in dem an einer beliebigen Stelle folgendes steht:
Code: 
<div id="kill_mich_12"><table><tr><td>&nbsp;</td></tr></table></div>
irgendwo im Dokument ist dann ein Button. Sobald der gedrückt wird soll dieser, durch das div - Tag eingeschlossene Bereich, gelöscht werden...

Geht das? Oder muss man immer alle knoten durch gehen um etwas zu löschen?
 
Wie du die Knoten ansprichst, ist eigentlich egal, solange sie gefunden werden, und der zu löschende Knoten ein Kindknoten des angegebenen Elternknoten ist.
Du kannst zur Identifizierung der Knoten auch Methoden verwenden, welche nichts mit dem Node-Objekt zu tun haben,
z.B.
Code: 
<form>
    <input type="button"value="lösch mich"onclick="this.form.removeChild(this)">
</form>
der Button ist ein Kindknoten des Formulars.
Das Formular wird aus dem Button heraus per "this.form" angesprochen, der Button selbst per "this"...klickt man auf den Button,ist er weg.

Zurück zur Frage, das geht, indem du den Kindknoten in deinem Beispiel per "document.getElementById('kill_mich_12').firstChild"
ansprichst.

Dies setzt aber vorraus, das der Elterknoten wie in deinem Fall nur einen einzigen Kindknoten besitzt(beachte dabei, dass schon ein Leerzeichen zwischen <div> und <table> einen Kindknoten darstellen würde, wie Quaese weiter oben schon erwähnt hatte).

Eine andere, etwas schlampige Methode(welche zudem weniger Browser interpretieren) wäre das Zuweisen einer leeren Zeichenkette an die innerHTML-Eigenschaft des Elterknotens:
Code: 
document.getElementById('kill_mich_12').innerHTML='';

Bis dein Buch eintrifft kannst du ja mal bei SelfHTML:Nodes schmökern ;)
 
Hi,

gestern abend ist mein Buch eingetroffen :D. Da ich jetzt 1 Woche Urlaub habe passt das genau.

Ok, das mit dem nur einen Kinderknoten erklärt, warum es bis jetzt nicht so richtig funktioniert hat... innerhalb meines divs sind mehrere Tabellen etc.

Ich werde daher auf die unsaubere Methode umsteigen müssen. Da das ganze jedoch "nur" im Intranet läuft und hier nur eine Browserversion eingesetzt wird dürfte das kein Problem sein ;) Ich dank dir für die vielen Tipps und die Umfangreiche Hilfe!

Gruß
 
Hallo!

Muss dann mal diesen alten Thread reaktivieren!
Ich hab mir jetzt auch son schickes Formular gebaut, nun habe ich viele Konstrukte ala

<input type="text" name="test2[]">

drin. Wie hier auch beschrieben.
An der Stelle frage ich mich wie kann ich denn par PHP auf "geclonte" Felder zugreifen die derart benannt sind, nachdem sie per post gesendet wurden?

Füllt Java diese "clone" mit irgendwas, oder heißen die dann alle test2[] wenn geclont und ich muss eine Nummer oder dergleichen direkt mit in die Clonfunktion bauen?
 
So benannte Felder sind in PHP in Array-Form verfügbar
PHP: 
print_r($_POST['test2'])
...gibt dir Aufschluss darüber, wie du sie ansprechen kannst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück