Dele skjema opp i flere sider

Det er mulig å dele et skjema opp i flere sider. Dette kan relativt enkelt gjøres via jQuery (JavaScript) og noen tilpasninger i skjema-renderingen.

jQuery har ikke offisielt kommet med en løsning for dette, men de har de under planlegging, og det finnes andre som har laget gode løsninger allerede. Les mer på denne siden: http://wiki.jqueryui.com/w/page/23314826/Wizard

Det er noen Examples på tilsvarende løsninger på denne siden, og uten å anbefale noen over de andre, så har Example 2 på denne løsningen blitt testet og fungerer for en eRedaktør-kunde. Det som ble gjort i dette tilfellet var

  • Legge inn script-lenke til jQuery og jQuery UI i <head>
  • Opprette en ny js-fil med jquery.wizard.js innholdet og koble denne opp i <head>
  • Tilpasse form.rendering.html (se under) med forrige/neste-knapper, jquery-knytning til skjema, fremdriftsindikator
  • Legge inn ulike seksjoner på skjemaelementene

form.rendering.html

<div class="page-form">
  <!--e include:box-default -->
  <h1><!--e title --><!--e edit --></h1>

  <div class="teaser"><!--e teaser --></div>

  <div><!--e text --></div>


    <div class="form-module" id="example-2">

      <er:section>
       <div class="step">
        <div class="form-module-section<!--e ifcount:odd --> odd<!--e endifcount:odd --><!--e ifcount:even --> even<!--e endifcount:even -->">
          <div class="form-module-section-top"><h2 class="id{sectionid}"><!--e sectionname --></h2></div>

          <er:fieldarea>
            <div class="form-module-row">

              <label><!--e fieldname --><span class="mandatory"><!--e required --> </span></label>
              <div>
              <er:fields>
                <er:standard>
                  <div style="{style}"><!--e formfield --></div>
                </er:standard>


              </er:fields>

              </div>
            </div>
          </er:fieldarea>
        </div>
       </div>
      </er:section>

<h3>Fremdrift <span id="location"></span></h3>
<div id="progressbar"></div>
<button type="button" name="backward" class="backward">Forrige</button> <button type="button" name="forward" class="forward">Neste</button><br /><br />

    </div>


    <div>
      <!--e valideringsinfo -->
    </div>

    <div class="form-module-footer">
      <span class="mandatory-info"><!--e required --></span>
      <span class="form-module-submit"><input type="button" name="" onclick="ValidateAndSubmitForm()" value="Send" /></span>
    </div>

  <!--e include:box-default-end -->
</div><!-- page form -->


<script type="text/javascript">
jQuery(function($) {

$("#progressbar").progressbar();

$("#example-2").wizard({
afterSelect: function( event, state ) {
$("#progressbar").progressbar("value", state.percentComplete);
$("#location").text("(" + state.stepsComplete + "/" + state.stepsPossible + ")");
}
});


});
</script>