nicht angemeldet
Guten Abend.
Ich habe ein Form und da kann der User Zeilen dazufügen.
Du hast keine Form, sondern ein Formular oder ein <form>-Element. So viel Zeit darf sein :>
Nun suche ich die Lösung, dass die Zeilen schon beim anwählen der Zahl ergänzt werden.
Formularelementen lässt sich mit dem Attribut onchange eine Funktion zuweisen, die bei jeder Änderung ausgeführt wird. In dieser Funktion (beginnt in Zeile 4) rufst Du die Anzahl der gewünschten Zeilen ab (Zeile 5, Mitte). Dann machst du in einer ersten Schleife (for, Zeile 5) die ersten Zeilen (i=1 bis i=Anzahl) über ihre style.display-Eigenschaft sichtbar und in einer zweiten Schleife (for, Zeile 8) die restlichen unsichtbar (i=Anzahl bis i=letzte Zeile).
Damit das Ganze auch bei abgeschaltetem Javascript funktioniert, setzt Du ein vollständiges Formular mit sechs Namenszeilen in den HTML-Code. Hat der Besucher Javascript eingeschaltet, blendest Du sofort nach dem Laden der Seite die überflüssigen Zeilen aus. Wie onchange für Formularänderungen gibt es das Ereignis window.onload für den Moment, in dem die Seite im Browser zumindest intern steht, d.h. Javascript-seitig vollständig greifbar ist (Zeile 1).
<script>
window.onload = function () { // diese Funktion, d.h. nachfolgende Zeilen nach Laden der Seite ausführen
var zeilen = document.getElementById("namensliste").getElementsByTagName("tr"); // alle Tabellenzeilen in zeilen speichern
var anmeldeformular = document.forms["anmeldeformular"]; // Formular in anmeldeformular speichern
anmeldeformular["anzahl"].onchange = function () { // für select.anzahl: diese Funktion immer nach Änderung (onchange) aufrufen
for (var i = 1; (i <= anmeldeformular["anzahl"].value) && (i < zeilen.length); i++) { // die ersten Tabellenzeilen ...
zeilen[i].style.display = ""; // ... anzeigen
}
for (; i < zeilen.length; i++) { // Und den Rest, der noch folgt ...
zeilen[i].style.display = "none"; // ... ausblenden
}
}
anmeldeformular["anzahl"].onchange(); // Änderungsfunktion einmal nach dem Laden der Seite "manuell" aufrufen,
// damit die gewählte Anzahl mit der sichtbaren Zeilenzahl übereinstimmt.
}
</script>
Obigen Code bringst Du im <head>-Block unter. Der nachfolgende ist Dein neues Formular.
<form name="anmeldeformular" method="post" action="anmeld2.php">
<select name="anzahl" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<table id="namensliste">
<thead>
<tr>
<td>Vorname</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td><input name="anmeldung[0][vorname]" type="text" /></td>
<td><input name="anmeldung[0][nachname]" type="text" /></td>
</tr>
<tr>
<td><input name="anmeldung[1][vorname]" type="text" /></td>
<td><input name="anmeldung[1][nachname]" type="text" /></td>
</tr>
<tr>
<td><input name="anmeldung[2][vorname]" type="text" /></td>
<td><input name="anmeldung[2][nachname]" type="text" /></td>
</tr>
<tr>
<td><input name="anmeldung[3][vorname]" type="text" /></td>
<td><input name="anmeldung[3][nachname]" type="text" /></td>
</tr>
<tr>
<td><input name="anmeldung[4][vorname]" type="text" /></td>
<td><input name="anmeldung[4][nachname]" type="text" /></td>
</tr>
<tr>
<td><input name="anmeldung[5][vorname]" type="text" /></td>
<td><input name="anmeldung[5][nachname]" type="text" /></td>
</tr>
</tbody>
</table>
<input type="submit" name="button" id="button" value="anmelden" />
</form>