1

I am using fuelux wizard for a multistep order process. I have got the wizrd working fine but if I wrap the whole wizard in a form no matter what I try, it submits the form whenever I click to the next step.

I have tried adding type="button" to the buttons so that they are not treated as submit buttons and to allow me to programmatically submit the form .on('finished' but then the wizard doesn't progress through the steps.

I have tried:

 $('#fuelux-wizard').wizard().on('change' , function(e, info){
                e.preventDefault();
}

But after logging the e in question it is 'change' so I think it is to do with the wizard not the form.

My jquery/javascript knowledge and understanding of events etc is not good enough to figure this out, I'm stuck.

The alternative seems to be to have individual forms within each step and then combine them in some way but this seems ridiculously complicated when wrapping the wizard in a single form would do the trick if I could control the submit, which seems like it should be possible.

Can anyone give me any pointers?

Thanks.

Tofuwarrior
  • 669
  • 9
  • 21
  • try $(document).wizard().on("change","#fuelux-wizard",function(){}); – Anoop Joshi P Feb 26 '14 at 11:33
  • thanks for your response Anoop, unfortunatelly that doesn't work; the wizard doesn't initialise at all. What was your thinking behind why it might help? – Tofuwarrior Feb 26 '14 at 16:24
  • If you provide a js fiddle, it will be more easy to get the solution – Anoop Joshi P Feb 26 '14 at 16:26
  • Hi Anoop, thanks for looking at this. I have created a fiddle here: http://jsfiddle.net/clearintent/A536R/3/ You can see that the wizard is submitting every time you click next hence the 'page can't be found' error. – Tofuwarrior Mar 03 '14 at 12:35

1 Answers1

1

I found a solution. Not sure that it is particularly elegant but it works.

So, before the initialisation of the wizard, I bound preventDefault to the submit event on the form.

$('#order_form').on('submit',function(e){
                e.preventDefault();
            });

then in the wizrd init, I bound this into the 'finished' event thus:

$('#fuelux-wizard').wizard().on('finished', function(e,data) {
                // allow order form to be submitted
                $('#order_form').unbind('submit');
                // submit order form
                $('#order_form').submit();
   });

Anyone suggest a more elegant solution or see any probloems with what I have done?

Tofuwarrior
  • 669
  • 9
  • 21