jQuery, stopping an animation associated with a jQuery Form Wizard

Question

Hi all,

I'm a designer with limited coding knowledge.

All I need to do is to create a simple form that submits data in one go. The form broke up into parts using jQuery Form Wizard.

There's this progress indicator at the bottom of the page.

However, when I finish the form, the arrow carries on and doesn't stop at Finish.

Below is the jQuery code I used to control the movement of the arrow:

$('#next').click(function() {
   if ($('#terms_check').attr('checked') && !$('#demoForm').isLastStep) {
      $('#arrow').animate({
            marginLeft: '+=56px'
      }, 500, function() {
       // Animation complete.
      });
   }
});

$('#back').click(function() {
      $('#arrow').animate({
           marginLeft: '-=56px'
      }, 500, function() {
      // Animation complete.
      });
});

I'll need to find out how to detect when the jQuery Form Wizard is reaching the Submitting stage then stop the animation at that point.

Please let me know what is the best way to do this. Thanks a lot for your time!

Cheers Will

Answer 1

I'm not sure what jquery form wizard is, but looking at your code it seems that $('#demoForm').isLastStep tests for whether the last step is being completed. Have you changed the ID tag of your form to something else (ie: changed the name from #demoForm) and not edited the jquery accordingly? Otherwise its not quite working as planned, and if so could you give us a link?