In Abhängigkeit von gewähltem Button entsprechendes Formular eingeblenden


  • empy
  • 1663 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • In Abhängigkeit von gewähltem Button entsprechendes Formular eingeblenden

    hi :)

    im rahmen einer, fürs studium gefordertern, projektarbeit gibt es leider schon am anfang kleine schwierigkeiten. ich hoffe ihr könnt mir helfen.

    und zwar habe ich eine "startseite". auf dieser befinden sich zwei buttons. einer soll ein formular einblenden, auf dem man seine daten eingeben kann, um sich zu registrieren. der andere button ruft ein formular auf, mit dem man sich anmelden kann. das aufrufen der formulare soll per javascript geschehen.

    ich dachte mir, wow is ja einfach und habe folgendes gemacht:

    Quellcode

    1. <form action="registrierung.html" method="post">
    2. <input type="submit" name="register" id="register" value="Registrieren" />
    3. </form>


    das gleiche natürlich auch für eine anmelden.html.
    auf registrieren.html und anmelden.html befinden sich dann jeweils die formulare.

    nur leider ist das nicht so wie die aufgabenstellung fordert. denn es soll auf der einstiegsseite das formular angezeigt werden. der alte inhalt soll quasi überschrieben werden und stattdessen per javascript das formular angezeigt werden, ohne erneut mit dem server zu verbinden.

    ich hoffe ihr versteht wie ich mein? ich hab im moment keinen blassen schimmer wie ich das angehen soll. ich bin um jede hilfe dankbar :)

    wie kann ich den inhalt einer seite mit javascript zur laufzeit überschreiben?

    danke bereits jetzt für eure mühen,
    lg empy
    Mein Profillink
    Was nicht geht, geht einfach nicht.

  • empy schrieb:

    hi :)

    wie kann ich den inhalt einer seite mit javascript zur laufzeit überschreiben?



    Hi,

    nun ja nicht direkt überschreiben, aber du kannst mit

    document.write("Text");

    zur Laufzeit Text in das Document einfügen. Das, wenn ich mich recht erinnere aber ans Ende der HTML-Datei. Wird dir wohl nicht helfen.

    Andere Möglichkeit, du lagerst beide Formulare in <div></div> Elemente und setzt deren CSS-Style-Element visibility auf false, und je nachdem was bei den Radio-Buttons ausgewählt wird erscheint dann das eine oder das andere div element, mit einem java befehl, der die CSS-Style-Element visibility auf true setzt.

    Dazu mal bei selfhtml schauen ...

    Aber vielleicht hat hier jemand noch eine andere Idee.

    Gruß

  • ich glaub ich hab die lösung!
    danke karlmosh du hast mich da irgendwie draufgebracht, wegen dem document.write

    und zwar geht das über das DOM...

    Quellcode

    1. document.getElementById("name").innerHTML="hier das was stehen soll, auch tags möglich"


    in diesem fall wird alles was am knoten "name" sitzt durch den neuen inhalt überschrieben. habs probiert, funktioniert prima! nur das formatieren scheint mir als sehr müsam :)

    aber ich hab ja noch zeit um dem htmlcode den feinschliff zu verpassen...

    sollte jmd noch andere anregungen haben, raus damit ^^

    nochmals danke, ciao
    Mein Profillink
    Was nicht geht, geht einfach nicht.

  • Hallo,

    Du bist schon auf dem richtigen Weg, pack der einfachheithalber die beiden Formulare in eine Variable und gib sie in einem DIV aus, siehe:

    Quellcode

    1. <script language="JavaScript">
    2. <!--
    3. function blob(action) {
    4. if(action=="register") {
    5. var temp = 'Register:<form action="" method="POST"><input type="Text" name="" value="" size="" maxlength=""><br /><input type="Password" name="" value="" size="" maxlength=""><br /><input type="Submit" name="Registrieren" value="Registrieren"></form>';
    6. }
    7. else {
    8. var temp = 'Anmelden:<form action="" method="POST"><input type="Text" name="" value="" size="" maxlength=""><br /><input type="Password" name="" value="" size="" maxlength=""><br /><input type="Submit" name="Anmelden" value="Anmelden"></form>';
    9. }
    10. document.getElementById("content").innerHTML = temp;
    11. }
    12. //-->
    13. </script>
    14. <noscript></noscript>
    16. <input type="Button" name="Registrieren" value="Registrieren" onclick="blob('register');" />&nbsp;&nbsp;<input type="Button" name="Anmelden" value="Anmelden" onclick="blob('anmelden');" />
    17. <div id="content"></div>
    Alles anzeigen


    bye
    Guardian