• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Javascript: Mehrere seiten in "einer"

Status
Für weitere Antworten geschlossen.
B

Barzul

Mitglied
Hallo,

Ich habe ein Problem und zwar möchte ich aus einem Formular die daten weitergeben, sodass sie auf der nächsten Seite immer nopcj vorhanden sind.

Ich dachte, um dies zu übergehen könnte man ja eine seite versteckt lassen, sodass nur das formular angezeigt wird. und wenn man auf submit drückt, dann wird der code der zweiten seite angezeigt, das formular wird versteckt. Sodass halt alles auf einer seite abgespielt wird.

Leider weiss ich nciht genau, wie ich das realisieren soll.

mfg

Barzul
 
Das hier ist nur ein Quick&Dirty-Ansatz. Der Code ist nicht sonderlich elegant. Wahrscheinlich gibt es auch bereits fertige Scripts, die so eine Funktionalität implementieren.

Bekannte Probleme:

- Enter schickt das Formular ab, auch wenn noch nicht der letzte Schritt erreicht wurde.

Code: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript">

window.onload = function () {
    document.getElementById('step2').style.display = 'none';
    document.getElementById('step3').style.display = 'none';

    document.getElementById('tostep2').onclick = function () {
        document.getElementById('step1').style.display = 'none';
        document.getElementById('step2').style.display = 'block';
    };

    document.getElementById('tostep3').onclick = function () {
        document.getElementById('step2').style.display = 'none';
        document.getElementById('step3').style.display = 'block';
    };
};

        </script>
    </head>

    <body>
        <form method="post" action="">

        <div id="step1">
            <p>Name: <input type="text" name="name" /></p>
            <p><button id="tostep2" type="button">weiter</button></p>
        </div>

        <div id="step2">
            <p>Passwort: <input type="password" name="password" /></p>
            <p><button id="tostep3" type="button">weiter</button></p>
        </div>

        <div id="step3">
            <p>Alter: <input type="text" name="age" /></p>
            <p><input type="submit" value="Absenden" /></p>
        </div>

        </form>

    </body>

</html>
 
hmm..das klappt leider nciht ganz, trotzdem danke mermshaus..wenn ich auf den button drücke, dann passiert gar nichts :(

Hier mal miejn code:

Code: 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Gewinnspiel</title>
        <script type="text/javascript">

window.onload = function () {
    document.getElementById('step2').style.display = 'none';
    document.getElementById('step3').style.display = 'none';

    document.getElementById('tostep2').onclick = function () {
        document.getElementById('step1').style.display = 'none';
        document.getElementById('step2').style.display = 'block';
    };

    document.getElementById('tostep3').onclick = function () {
        document.getElementById('step2').style.display = 'none';
        document.getElementById('step3').style.display = 'block';
    };
};

        </script>
</head>
<body>
<!-- STEP 1 -- FRAGEN -->
<div id="step1">
<form name="Formular" action="" method="post">
<pre>
<br /><br />
1. Frage<br /><br />
 <input id="1" type="radio" name="1" value="a">antwort a<br />
 <input id="1" type="radio" name="1" value="b">antwort b<br />
<input id="1" type="radio" name="1" value="c">antwort c<br /><br />
2. Frage<br /><br />
<input id="2" type="radio" name="2" value="a">antworta<br />
<input id="2" type="radio" name="2" value="b">antwortb<br />
<input id="2" type="radio" name="2" value="c">antwortc<br />
<button id="tostep3" type="button">Weiter</button>
</form>
</div>

<!-- STEP 2 -- Kontaktdaten -->
<div id="step2">
TESTESTESTEST
</div>

</body>
</html>
 
id="tostep3" mit id="tostep2" ersetzt, nicht gesetzte JavaScript-Anweisungen auskommentiert (führen sonst zu JS-Fehlern).

Code: 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Gewinnspiel</title>
        <script type="text/javascript">

window.onload = function () {
    document.getElementById('step2').style.display = 'none';
    //document.getElementById('step3').style.display = 'none';

    document.getElementById('tostep2').onclick = function () {
        document.getElementById('step1').style.display = 'none';
        document.getElementById('step2').style.display = 'block';
    };

    /*document.getElementById('tostep3').onclick = function () {
        document.getElementById('step2').style.display = 'none';
        document.getElementById('step3').style.display = 'block';
    };*/
};

        </script>
</head>
<body>
<!-- STEP 1 -- FRAGEN -->
<div id="step1">
<form name="Formular" action="" method="post">
<pre>
<br /><br />
1. Frage<br /><br />
 <input id="1" type="radio" name="1" value="a">antwort a<br />
 <input id="1" type="radio" name="1" value="b">antwort b<br />
<input id="1" type="radio" name="1" value="c">antwort c<br /><br />
2. Frage<br /><br />
<input id="2" type="radio" name="2" value="a">antworta<br />
<input id="2" type="radio" name="2" value="b">antwortb<br />
<input id="2" type="radio" name="2" value="c">antwortc<br />
<button id="tostep2" type="button">Weiter</button>
</form>
</div>

<!-- STEP 2 -- Kontaktdaten -->
<div id="step2">
TESTESTESTEST
</div>

</body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben