Interaktives Formular

[Yin]

Hi,

ich würde gerne in einem Formular bestimmte Felder nur auf Wunsch anzeigen.
Es geht hier wieder um Adressen.
Ein Nutzer kann auf Wunsch eine weitere Adresse hinzufügen. Dafür soll er auf "Adresse hinzufügen" klicken und erst anschließend erscheinen die zugehörigen Felder in dem Formular.

Ich habe das Formular in einer Table realisiert.
Mir schwebt vor, die neuen Zeilen mit Javascript einblenden zu lassen.
Sie sind also defacto vorhanden, aber ausgeblendet und werden erst auf Knopfdruck sichtbar.

Kennt Ihr ein Tutorial o.Ä. für so einen Anwendungsfall?
Würdet Ihr das nicht mit Javascript machen?

Viele Grüße
Yin

[niklaskamenisch]

recht einfach zu machen, da braucht es kein tutorial

wenn du die ganze tabelle ausblendest dann ist es mit einer zeile zu machen:

  
<button onclick="document.getElementById('id_der_tabelle').style.display = 'block';>Einblenden</a>  

Am besten zeigst du das Formular immer an und sagst beim laden (z.b. onload) dass er es ausblenden soll. Dann hilfst du den Leuten die Javascript deaktiviert haben enorm weiter!

Ob das Formular angezeigt wird, kannst du mit PHP nicht abfragen direkt!

[suit]

<button onclick="document.getElementById('id_der_tabelle').style.display = 'block';>Einblenden</a>

  
Einer Tabelle die block-Anzeige-Eigenschaft zu geben ist nicht immmer eine schlaue Idee. Die Eigenschaft "table" ist hier zielführender:  
  
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display>

[Yin]

Hi,

ich probier es gerade Zeilenweise über getElemntsbyName
Poste nachher mal das Ergebnis.

Thx!

[niklaskamenisch]

damit gehst du alle element durch, das ist nicht so sinnvoll und durch die schleifeneigenschaft auch nicht so schnell ...

wie vom vorposter gesagt, eher auf table statt auf block (block passt bei normalen sachen eher).

[suit]

damit gehst du alle element durch, das ist nicht so sinnvoll und durch die schleifeneigenschaft auch nicht so schnell ...

Solange die Tabelle nicht 10.000 Zeilen hat dürfte das hübsch egal sein.

wie vom vorposter gesagt, eher auf table statt auf block (block passt bei normalen sachen eher).

Bei Tabellen-Zeilen natürlich table-row ;)

[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>

[ChrisB]

Hi,

Hier das Ergebnis:

Schlecht, (u.a.) weil:

• TR-Elemente kein name-Attribut haben
• du Funktionen mit Nummerierung im Namen hast, die im Grunde alle das selbe machen, nur mit unterschiedlichen Elementen.
    Besser: *Eine* parametrisierte Funktion.

MfG ChrisB

[YIN]

Schlecht, (u.a.) weil:

• TR-Elemente kein name-Attribut haben

Ok, hast Du eine Alternative?
Es funktioniert einwandfrei ist aber nach dem W3C Code Validator nicht suaber - wie Du schon sagst: tr hat kein name-atrribut

Wie könnte ich sonst die Zeilen ausblenden? Ich will ja nicht jeder Zeile eine eigene ID zuweisen müssen.

[niklaskamenisch]

Wie könnte ich sonst die Zeilen ausblenden? Ich will ja nicht jeder Zeile eine eigene ID zuweisen müssen.

CSS bietet die möglichkeit das X. element anzusprechen, welches unter table liegt. Nachteil ist aber das es nur in den neuen versionen geht.

»»Specify a background color for every p element that is the second child of its parent:

p:nth-child(2)  
{  
background:#ff0000;  
} 

Alternative wäre auch noch inline-css, was aber nicht schön ist.
Oder aber, was ich schon öfters gesehen habe, dass du das TH für dort missbrauchst und die td für den rest.

Da ich das meist alles mit Divs baue, kommt dieses Problem nicht so oft vor!

[Kai345]

[latex]Mae  govannen![/latex]

• TR-Elemente kein name-Attribut haben

Ok, hast Du eine Alternative?
Es funktioniert einwandfrei

Genau das kannst du _zumindest theoretisch_ (!) nicht garantieren, ohne sämtliche Browser, die es gibt in sämtlichen aktuellen und sagen wir mal 2 Vorgängerversionen auf allen Betriebssystemen in ebenfalls mindestens aktueller und Vorgängerversion zu testen. Viel Spaß ;)

Wie könnte ich sonst die Zeilen ausblenden? Ich will ja nicht jeder Zeile eine eigene ID zuweisen müssen.

Wenn du die Anzahl der TR-Elemente kennst und selbige sowie Position garantieren kannst, über den Index der NodeList/HTMLCollection
Oder eben per id. Was ist an einem name-Attribut besser als an einem id-Attribut?

Stur lächeln und winken, Männer!
Kai

[Kai345]

[latex]Mae  govannen![/latex]

Wie könnte ich sonst die Zeilen ausblenden? Ich will ja nicht jeder Zeile eine eigene ID zuweisen müssen.

Sinnvolle Verwendung des Markup hilft hier auch.

<form name="profil_anlegen" action="{$_SERVER['PHP_SELF']}" method="post" accept-charset="ISO-8859-1">  
<table border="1">  
  
<tbody>  
<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>  
</tbody>  
  
<tbody id="zeilen_zwischenziel1" class="ausgeblendet">  
<tr><th colspan="7">Zwischenziel 1</th></tr>  
<tr><th>Strasse</th><td colspan="6"><input name="adresse[1][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[1][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[1][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr><th>Stadt</th><td colspan="6"><input name="adresse[1][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Land</th><td colspan="6"><input name="adresse[1][land]" type="text" size="30" maxlength="30" /></td></tr>  
</tbody>  
  
<tbody id="zeilen_zwischenziel2" class="ausgeblendet">  
<tr name=""><th colspan="7">Zwischenziel 2</th></tr>  
<tr><th>Strasse</th><td colspan="6"><input name="adresse[2][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[2][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[2][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr><th>Stadt</th><td colspan="6"><input name="adresse[2][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Land</th><td colspan="6"><input name="adresse[2][land]" type="text" size="30" maxlength="30" /></td></tr>  
</tbody>  
  
<tbody id="zeilen_zwischenziel3" class="ausgeblendet">  
<tr><th colspan="7">Zwischenziel 3</th></tr>  
<tr><th>Strasse</th><td colspan="6"><input name="adresse[3][strasse]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Hausnummer (nur Zahlen)</th><td colspan="6"><input name="adresse[3][hausnummer]" type="text" size="4" maxlength="4" /></td></tr>  
<tr><th>Postleitzahl (nur Zahlen)</th><td colspan="6"><input name="adresse[3][plz]" type="text" size="5" maxlength="5" /></td></tr>  
<tr><th>Stadt</th><td colspan="6"><input name="adresse[3][stadt]" type="text" size="30" maxlength="30" /></td></tr>  
<tr><th>Land</th><td colspan="6"><input name="adresse[3][land]" type="text" size="30" maxlength="30" /></td></tr>  
</tbody>  
  
<tbody>  
<tr id="cbutton"><th colspan="7"><input type="button" onclick="show_zwischenziel_felder()" value="Zwischenziel hinzufügen" /></th></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>  
</tbody>  
</table>  
</form>  
  
  
<script type="text/javascript">  
var ix = 1;  
  
function show_zwischenziel_felder() {  
   document.getElementById("zeilen_zwischenziel" + ix).className = "";  
   if (ix > 2) {  
   	document.getElementById("cbutton").className = 'ausgeblendet';  
   }  
   ix++;  
}  
</script>

Stur lächeln und winken, Männer!
Kai

[Kai345]

[latex]Mae  govannen![/latex]

<tbody id="zeilen_zwischenziel2" class="ausgeblendet">
<tr name=""><th colspan="7">Zwischenziel 2</th></tr>

hier noch das leere name-Attribut komplett entfernen

Stur lächeln und winken, Männer!
Kai

[Kai345]

[latex]Mae  govannen![/latex]

wie vom vorposter gesagt, eher auf table statt auf block (block passt bei normalen sachen eher).

Bei Tabellen-Zeilen natürlich table-row ;)

Einfacher ist elementreferenz.style.display = ''; dann muß man sich um den Typ des Elements nicht mehr kümmern, da der Standardwert verwendet wird.

Stur lächeln und winken, Männer!
Kai