Formular ein-ausblenden

[Simi]

Hi all,

Beim Titel ist mir leider nichts Besseres eingefallen. Nun zu meiner Frage.

Ich habe als erstes ein Formular mit zwei Radio Buttons. Nun je nach dem was angewählt wird, muss untenan ein weiteres Formular angezeigt werden. Ich möchte das ganze ohne noch zusätzlich auf einen submit Knopf zu klicken realisieren. Wie ich das alleine mit PHP realisieren muss ist kein Problem. Mittel if Abfrage und danach das Formular anzeigen was dazu gehört. Ich möchte das ganze aber ein bisschen professioneller gestalten und frage nun euch, wie ihr das lösen würdet.

Im Hintergedanken fallen mir immer wieder folgende Begriffe ein wie JavaScript (evtl. mit AJAX) und CSS mit display: none. Dennoch finde ich keinen Ansatz um das ganze zu realisieren. Ich hoffe nicht, dass ich mit der internen Suche im Forum eine Lösung verpasst habe.

Leider bin ich kein JavaScript Guru und über Lösungsansätze oder Links wäre ich sehr sehr dankbar!

Vielen Dank im Voraus für eure Hilfe!

Gruss
Simi

 

[Jürgen Auer]

Den unteren Teil in ein div mit id und display:none packen.

Oben dem OnClick-Ereignis eine Funktion zuweisen, die sich mit document.getElementById das untere Element holt und je nach Zustand (an- oder ausgeklickt) unten display auf block/inline oder none setzt.

Die SelfHtml-JavaScript-Dokumentation reicht da aus.

 

[Simi]

OK danke werde es mal versuchen...für weitere Hilfe wie Code Beispiele wäre ich dankbar.

Gruss
Simi

 

[webmaster]

Es ist doch schon alles gesagt worden ...

Jetzt ist es doch einfach, aber wenn du das nicht verstehst, ist das hier vielleicht das falsche Forum für dich !

 

[webmaster]

Sorry for doppelten post, m@rvin hat alles geklärt !

 

[M@rvin]

CODE
function switchit ( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == "none"){
target.style.display = "";
} else {
target.style.display = "none";
}
}
}



Nenne diese Datei switch.js

so nun packst du das Formular in einen DIV-Tag


CODE
<div id="form" sytle="display: none;">
<!-- Form -->
</div>



Der Link zum ausklappen :


CODE
<a href="#" onClick="switchit('form');"></a>



Ungetesete dürfte aber funktionieren.

Mfg
Marvin

 

[Sven K]

allgemeine verbesserung: <a href="#" ....> ist immer etwas ungünstig, besser ist <a href="javascript:void(0);" .....

 

[M@rvin]

QUOTE (Sven K @ Di 2.10.2007, 20:57) allgemeine verbesserung: <a href="#" ....> ist immer etwas ungünstig, besser ist <a href="javascript:void(0);" .....

Danke für den Tipp

 

[threadi]

Noch besser ist wenn man bei dem Link für diejenigen ohne JavaScript noch ein Ziel angibt. Beim onclick-Attribut muss man dann nur noch "return false" angeben um für JavaScript-User den eigentlichen Link zu deaktivieren, also:

CODE <a href="ziel.html" onclick="dasmacheich();return false;">...