Dynamisch Inhalt hinzufügen

P

Pre7ender

Mitglied
Hallo allerseits

Ich habe nicht die grösste Erfahrung mit Javascript, aber so ein bischen kann ich mich damit rumschlagen.

Ich habe folgendes Problem oder folgende Frage:

Ich habe ein Formular, wo man mehrere Strings in eine Datenbank schreiben kann. Also einfach mehrere <input type='text ..> Felder.
Da man bis zu 20 Stück eintragen kann, möchte ich nicht auf Anhin 20 Inputs anzeigen, sondern vielleicht nur mal zwei.
Jetzt soll es möglich sein, dass man mittels einem Button weitere Zeilen hinzufühgen bzw. anzeigen kann.

Die Zeilen, welche zu Begin nicht angezeigt werden sollen, würde ich mit "display:none;" ausblenden.
Der Button hat dann sowas wie ein "onClick=show_next()" und zeigt pro Klick immer eine Zeile mehr an.

Nur wie kann ich das jetzt mit dem Javascript machen?
Wenn jemand eine Seite kennt, die sowas hat, oder vielleicht ein Howto oder sowas, wäre ich froh.

Vielen Dank
 
Hey vielen Dank für den Link.

Nur habe ich noch eine kleine Frage dazu, wie soll ich da in dem Beispiel ein Submit Button hinzufügen?

Beim Erweitern wird ja das ganze ans Endes des Forumulars hinzugefügt.
Dort möchte ich aber dann den Submit Button?

Und wenn ich ihn dort hinmache, kommt das nächste Textfeld nach den Submit Button.. was dann alles kaputt macht..
 
Hi,

dann hänge das geclonete Element nicht an das Formularelement an, sondern z.B. an ein DIV. Hinter dieses
DIV platzierst Du den Submit-Button. Damit sollten der Button immer am Ende sein.

Ciao
Quaese
 
Hi,

in etwa so:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    //objButton.form.appendChild(tmpNode);
    document.getElementById("holderID").appendChild(tmpNode);
    for(j=0;j<document.getElementById("holderID").lastChild.childNodes.length;++j)
        {
        if(document.getElementById("holderID").lastChild.childNodes[j].type=='text')
            {
            document.getElementById("holderID").lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','document.getElementById("holderID").removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
<form>
  <div id="holderID">
    <div>
      <input type="text"size="20"name="textfeldname[]"><br>
      <input type="button"value="noch eins"onclick="clone_this(this)">
    </div>
  </div>
  <p><input type="submit"></p>
</form>
</body>
</html>
Ciao
Quaese
 
Hi

Vielen Dank für die Antwort, das hat mir sehr viel weitergeholfen. Habe das Script jetzt auch etwas besser verstanden.

Eine Frage jetzt doch noch:
Wäre es möglich, das Javascript so zu schreiben, dass es allen Inhalt eines Tags (also auch Tags in diesem Tag) klont?

Zum Beispiel (was alles kopiert werden soll):
Code: 
<tr id='toClone'>
  <td><input type='text' name='text'></td>
  <td><select><option>1</option><option>2</option></select></td>
  <td><select><option>3</option><option>4</option></select></td>
</tr>

Somit müssten alle drei TDs kopiert werden, oder egal was in diesem TR mit der ID xy ist.
Wäre das auch möglich?
 
Hi,

willst Du die komplette Tabellenzeile clonen, wendest Du die Methode cloneNode auf die gewünschte Zeile an. Als
Argument übergibst Du true, dadurch werden Unterstruktur und Inhalte ebenfalls dupliziert. Das neue Element hängst
Du anschliessend an das TBODY-Element der Tabelle an.
Code: 
// ID-Counter
var intCountID = 0;

function cloneTR(strID){
  // Tabellenzeile mit Unterstruktur und Inhalten clonen
  var objClone = document.getElementById(strID).cloneNode(true);
  // ID ändern
  objClone.id = "toClone_" + intCountID++;
  // Neue Zeile in TBODY einhängen
  document.getElementById(strID).parentNode.appendChild(objClone);
}
Die Routine erwartet die ID der Tabellenzeile, die geclonet werden soll. Weiterhin wird ein ID-Counter mit jedem neuen
Clone inkrementiert, um die Eindeutigkeit zu gewährleisten.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück