Enable a multipage/multistep form and store data in SessionStorage

README.md

Hier findest du ein einfaches Beispiel, wie du mehrere Formulare und auch Infotexte so kombinieren kannst, dass die Daten erst clientseitig gespeichert werden und später gebündelt zur Verfügung stehen, um beispielsweise an eine serverseitige Scriptsprache gesendet zu werden.

See it in action: http://codepen.io/anon/pen/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.