Javascript: Mehrere seiten in "einer"

html.de-Forum JavaScript
1

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

2

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]

<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>
[/code]
3

hmm…das klappt leider nciht ganz, trotzdem danke mermshaus…wenn ich auf den button drücke, dann passiert gar nichts :frowning:

Hier mal miejn 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>
4

id=„tostep3“ mit id=„tostep2“ ersetzt, nicht gesetzte JavaScript-Anweisungen auskommentiert (führen sonst zu JS-Fehlern).

[code]

Gewinnspiel

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>




1. Frage


 antwort a

 antwort b

antwort c


2. Frage


antworta

antwortb

antwortc

Weiter
TESTESTESTEST
[/code]
5

Danke Mermshaus, es hat geklappt :slight_smile: