Zeile dazufügen

[Graciela]

Hallo

Ich habe ein Form und da kann der User Zeilen dazufügen. Nur muss der User bei meiner Version imme rauf den Submit-Button klicken, ansonsten die Zeilen nicht ergänzt werden.

Nun suche ich die Lösung, dass die Zeilen schon beim anwählen der Zahl ergänzt werden.

Ich möchte dass echte HTML-Zeilen generiert werden, damit ich die Daten anschliessend mit POST weiterleiten kann. Alles was ich gefunden habe geht nur mit GET

So sieht das File aus, das nur funktioniert wenn auf den Submit-Button geklickt wird

  
  
<!--eine Liste mit der Anzahl Personenzahl -->  
<form action="index.php" method="post" name="form2" id="form2">  
  <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>  
  <input type="submit" value="Personen" name="personen" />  
</form>  
  
  
  
<!-- Anmeldeformular -->  
<form id="form1" name="form1" method="post" action="anmeld2.php">  
  <table>  
    <tr>  
      <td valign="top">Vorname</td>  
      <td valign="top">Name</td>  
    </tr>  
    <?php  
$anzahl=$_POST['anzahl'];  
  
if (isset($_POST['personen']))  
{ $anzahl= isset($_POST['anzahl']) ? $_POST['anzahl'] : '';  
for ($i=1; $i<=$anzahl; $i++)  
  {?><!-- wenn mehr als 1 Person angemeldet werden -->  
    <tr>  
      <td><input name="anmeldung[<?php echo $i;?>][vorname]" type="text"  /></td>  
      <td><input name="anmeldung[<?php echo $i;?>][nachname]" type="text" /></td>  
    </tr>  
    <?php  
  }  
}  
  
  
if(empty($_POST['anzahl']))  
{  
?><!-- wenn nur 1 Person sich anmeldet -->  
    <tr>  
      <td><input name="anmeldung[1][vorname]" type="text" /></td>  
      <td><input name="anmeldung[1][nachname]" type="text"   /></td>  
    </tr>  
<?php  
}  
?>  
  
  
    <tr>  
      <td><input type="submit" name="button" id="button" value="anmelden" /></td>  
      <td>&nbsp;</td>  
    </tr>  
  </table>  
</form>  
  
  

[Walter.]

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>