zxLqqp

index.html

<form id="schritt1" method="get">
    <input type="text" name="firstname" />
    <input type="text" name="lastname" />
    <input type="submit" />
</form>

<div class="info">
    Bla bla
  <button id="weiter">Weiter</button>
</div>

<form id="schritt3" method="get">
    <select name="auswahl">
        <option name="dies">Dies</option>
        <option name="das">Das</option>
    </select>
  <input type="submit" />
</form>

script.js

$('form#schritt1').submit(function (ev) {
    ev.preventDefault();
    var firstname = $('input[name=firstname]').val();
    var lastname = $('input[name=lastname]').val();
  window.sessionStorage.setItem('firstname',firstname);
  window.sessionStorage.setItem('lastname',lastname);
    $(this).hide();
    $('.info').show();
  console.log(firstname,lastname)
});

$('#weiter').click(function () {
  $(this).parent().hide();
  $('form#schritt3').show();
});

$('form#schritt3').submit(function (ev) {
    ev.preventDefault();
    var auswahl = $('select').find('option:selected').val();
  window.sessionStorage.setItem('auswahl',auswahl);
    $(this).hide();
  $('body').html('<strong>Eingegebene Daten:</strong><br />' + window.sessionStorage.getItem('firstname') + ' ' + window.sessionStorage.getItem('lastname') + ' <br />Auswahl: ' + window.sessionStorage.getItem('auswahl'))
});

style.css

.info, form#schritt3 {
    display: none;
}

zxLqqp.markdown

zxLqqp

A Pen by Captain Anonymous on CodePen.

License.