Simplify your workflow in minutes.
Don't have an account yet? Sign up.
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
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>