Interaktives Formular

[Yin]

Hier das Ergebnis:
Formular:

<form name="profil_anlegen" action="{$_SERVER['PHP_SELF']}" method="post" accept-charset="ISO-8859-1">  
<table border="1">  
<tr><th colspan="7">Daten zur Reiseplanung</th></tr>  
<tr><th colspan="7">Zieladresse</th></tr>  
<tr><th>Strasse</th><td colspan="6"><input name="adresse[0][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[0][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[0][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr><th>Stadt</th><td colspan="6"><input name="adresse[0][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Land</th><td colspan="6"><input name="adresse[0][land]" type="text" size="30" maxlength="30" /></td></tr>  
<tr id="button1"><th colspan="7"><input type="button" onclick="show_zwischenziel1_felder()" value="Zwischenziel hinzufügen" /></th></tr>  
  
<tr name="zeilen_zwischenziel1"><th colspan="7">Zwischenziel 1</th></tr>  
<tr name="zeilen_zwischenziel1"><th>Strasse</th><td colspan="6"><input name="adresse[1][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel1"><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[1][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr name="zeilen_zwischenziel1"><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[1][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr name="zeilen_zwischenziel1"><th>Stadt</th><td colspan="6"><input name="adresse[1][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel1"><th>Land</th><td colspan="6"><input name="adresse[1][land]" type="text" size="30" maxlength="30" /></td></tr>  
<tr id="button2"><th colspan="7"><input type="button" onclick="show_zwischenziel2_felder()" value="Zwischenziel hinzufügen" /></th></tr>  
  
<tr name="zeilen_zwischenziel2"><th colspan="7">Zwischenziel 2</th></tr>  
<tr name="zeilen_zwischenziel2"><th>Strasse</th><td colspan="6"><input name="adresse[2][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel2"><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[2][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr name="zeilen_zwischenziel2"><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[2][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr name="zeilen_zwischenziel2"><th>Stadt</th><td colspan="6"><input name="adresse[2][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel2"><th>Land</th><td colspan="6"><input name="adresse[2][land]" type="text" size="30" maxlength="30" /></td></tr>  
<tr id="button3"><th colspan="7"><input type="button" onclick="show_zwischenziel3_felder()" value="Zwischenziel hinzufügen" /></th></tr>  
  
<tr name="zeilen_zwischenziel3"><th colspan="7">Zwischenziel 3</th></tr>  
<tr name="zeilen_zwischenziel3"><th>Strasse</th><td colspan="6"><input name="adresse[3][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel3"><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[3][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr name="zeilen_zwischenziel3"><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[3][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr name="zeilen_zwischenziel3"><th>Stadt</th><td colspan="6"><input name="adresse[3][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr name="zeilen_zwischenziel3"><th>Land</th><td colspan="6"><input name="adresse[3][land]" type="text" size="30" maxlength="30" /></td></tr>  
<tr>  
<th>Abesenden</th><td colspan="6"><input name="submit" type="submit" value="Absenden" /></td></tr>  
<tr>  
<th>Felder Löschen</th><td colspan="6"><input type="reset" value=" Felder löschen" /></td></tr>  
</table>  
</form>  

Script:

  
<script type="text/javascript">  
zeilen=document.getElementsByName("zeilen_zwischenziel1");  
for(i=0;i<zeilen.length;i++) {zeilen[i].style.display = 'none';}  
document.getElementById("button2").style.display='none';  
zeilen=document.getElementsByName("zeilen_zwischenziel2");  
for(i=0;i<zeilen.length;i++) {zeilen[i].style.display = 'none';}  
document.getElementById("button3").style.display='none';  
zeilen=document.getElementsByName("zeilen_zwischenziel3");  
for(i=0;i<zeilen.length;i++) {zeilen[i].style.display = 'none';}  
  
function show_zwischenziel1_felder() {  
	anzeigen=document.getElementsByName("zeilen_zwischenziel1");  
	for(i=0;i<anzeigen.length;i++) {anzeigen[i].style.display = 'table-row';}  
	document.getElementById("button2").style.display='table-row';  
	document.getElementById("button1").style.display='none';  
}  
  
function show_zwischenziel2_felder() {  
	anzeigen=document.getElementsByName("zeilen_zwischenziel2");  
	for(i=0;i<anzeigen.length;i++) {anzeigen[i].style.display = 'table-row';}  
	document.getElementById("button3").style.display='table-row';  
	document.getElementById("button2").style.display='none';  
}  
  
function show_zwischenziel3_felder() {  
	anzeigen=document.getElementsByName("zeilen_zwischenziel3");  
	for(i=0;i<anzeigen.length;i++) {anzeigen[i].style.display = 'table-row';}  
	document.getElementById("button3").style.display='none';  
}  
</script>