thecodemine
commented
11 years ago One way would be to add another button to the form which is shown only on step 4. This button submits the form by adding a "submit_step" class to the step when the button is clicked - and then trigger a the next method of the wizard. Something like this:
....
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="submit_early" value="Submit" type="button" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
....
<script type="text/javascript">
$(function(){
var btn = $("#submit_early"), wizard = $("#demoForm"),
formOptions = {
success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
beforeSubmit: function(data){
$("#data").html("data sent to the server: " + $.param(data));
},
dataType: 'json',
resetForm: true
};
wizard.formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
formOptions : formOptions,
}).bind("before_step_shown", function(e, data){
btn.hide();
if(data && data.currentStep === "finland"){ // the id of your step 4
btn.show();
}
}).trigger("before_step_shown");
btn.click(function(event){
var state = wizard.formwizard("state");
if(wizard.valid()) $("#" + state.currentStep).addClass("submit_step");
wizard.formwizard("update_steps");
wizard.formwizard("next");
return false;
})
});
</script>
Is it possible to include the option to submit a form at multiple steps? I have a 6 step form and would like the user to have the option to choose between submitting the form and moving to the next step (2 buttons) on step 4 and 5.