Einblenden eines Bereiches

[Fischi]

Hallo.

Ich habe eine Seite auf der sich folgendes Forumlar befindet.

  
<form>  
<select name='type'>  
<option value='user'>User</option>  
<option value='artists'>Artist</option>  
</select>  
</form>  

Nun gibt es 2 Tabellen von denen je nachdem wo ich drauf klicke eine unter diesem Formular angezeigt werden soll.
Wenn ich Option User anwähle soll Tabelle 1 darunter angezeigt werden und bei Option 2 soll Tabelle 2 darunter angezeigt werden.

Wir würde das mit Javascript aussehen?

mfg

Fischi

[wucher wichtel]

Hallo!

Du gibst diesem Bereich (<form>) eine ID. Dann schreibst du eine Funktion. In dieser Funktion greifst du per document.getElementById() auf das style-Objekt zu und veränderst den Wert der CSS-Eigenschaft display. Die Funktion rufst du über einen Eventhandler auf (z.B. onchange).

ciao, ww

[Fischi]

Du gibst diesem Bereich (<form>) eine ID. Dann schreibst du eine Funktion. In dieser Funktion greifst du per document.getElementById() auf das style-Objekt zu und veränderst den Wert der CSS-Eigenschaft display. Die Funktion rufst du über einen Eventhandler auf (z.B. onchange).

Hi.
 So mein bisheriger Versuch. Kappt aber nicht. Warum?

<script type="text/javascript">
function einblenden_user(){
document.getElementByID('a_form').style.display='block';
document.getElementByID('u_form').style.display='none';
}
function einblenden_artist(){
document.getElementByID('a_form').style.display='none';
document.getElementByID('u_form').style.display='block';
}
</script>

<form>
<select name='type'>
<option value='user' selected='selected'><a href='#'onclick='einblenden_user()' style='cursor:pointer'>User</a></option>
<option value='artists'><a href='#'onclick='einblenden_artist()' style='cursor:pointer'>Artist</a></option>
</select>
</form>

<table id='a_form' style='display:none;'>
INHALT 1
</table>
<table id='u_form' style='display:block'>
INHALT 2 UND SO
</table>

Hoffe du kansnt mir helfen.

mfg

Fischi

[wucher wichtel]

Hallo!

Ich habe einen Fehler gemacht, bei meiner Beschreibung. Aber du hast es trotzdem richtig gemacht :-) Gut so!

document.getElementByID('a_form').style.display='block';

JavaScript ist case-sensitiv. Das heißt, dass es auf die Groß- und Kleinschreibung achtet. Deswegen musst du document.getElementById() schreiben. Das letze "d" ist klein.

<option value='artists'><a href='#'onclick='einblenden_artist()' style='cursor:pointer'>Artist</a></option>

Der Link ist hier überflüssig. Du kannst das onclick-Attribut auch in den <option>-Tag schreiben. Den <style>-Tag auch. Allerdings lassen sich Formularelemente nur eingeschränkt formatieren. Aber warscheinlich funktioniert's.

Am besten wäre es, wenn du statt onclick den onchange Eventhandler schreiben würdest. Dieser reagiert auch, wenn das Formularelement per Tabulator und Pfeiltasten verwendet wird.

<table id='a_form' style='display:none;'>
INHALT 1
</table>

Du hast die <tr> und <td> Tags vergessen. Aber das ist in deinem originalen Script sicher drin, oder?

So müsste es funktionieren :-) Bei mir jedenfalls.

ciao, ww

[Fischi]

Hey!

Du hast die <tr> und <td> Tags vergessen. Aber das ist in deinem originalen Script sicher drin, oder?

Na klar da ist ein ganzes Formular in valider HTML formation drin ;)

So müsste es funktionieren :-) Bei mir jedenfalls.

Danke!
Es klappt. :)

Bis dann udn schönes Wochenende wünsch ich dir.

mfg

Fischi

[wahsaga]

hi,

<option value='artists'><a href='#'onclick='einblenden_artist()' style='cursor:pointer'>Artist</a></option>

Der Link ist hier überflüssig.

Nicht nur das, sondern sogar komplett falsch.

option hat #PCDATA als Inhaltstyp.

Du kannst das onclick-Attribut auch in den <option>-Tag schreiben.

Ungünstig, macht in manchen Browsern Probleme.
Auf onchange im Select zu reagieren, ist idR. günstiger.

gruß,
wahsaga

[wucher wichtel]

Hallo!

option hat #PCDATA als Inhaltstyp.

Diese Liste, die du verlinkt hast, kannte ich nicht, obwohl ich jetzt seit einigen Jahren SELFHTML kenne. Danke für den Link und den Hinweis! :-)

Du kannst das onclick-Attribut auch in den <option>-Tag schreiben.

Ungünstig, macht in manchen Browsern Probleme.
Auf onchange im Select zu reagieren, ist idR. günstiger.

Hatte ich weiter unten ja dann auch geschrieben.

ciao, ww

[wahsaga]

hi,

Du kannst das onclick-Attribut auch in den <option>-Tag schreiben.

Ungünstig, macht in manchen Browsern Probleme.
Auf onchange im Select zu reagieren, ist idR. günstiger.

Hatte ich weiter unten ja dann auch geschrieben.

Ja, aber mit anderer Begründung.

gruß,
wahsaga

[wucher wichtel]

Hallo!

Du kannst das onclick-Attribut auch in den <option>-Tag schreiben.

Ungünstig, macht in manchen Browsern Probleme.
Auf onchange im Select zu reagieren, ist idR. günstiger.

Hatte ich weiter unten ja dann auch geschrieben.

Ja, aber mit anderer Begründung.

Hmm...stimmt :-)

ciao, ww