Jumping to a specific step in jQuery formwizard

I am using the jQuery plugin 'formwizard' and wish to allow users to jump to a specific step in the process.

开发者_开发百科What I thought would do it was the 'show' method:

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

but all this does is expose the step on screen without hiding the previous step.

If there was another method to hide the current screen before calling the 'show' then it would be perfect.

The plug home page is FormWizard Homepage

Anyone familiar with this plugin and know how to jump to a specific step using a method rather than linking from a form element?

Remember to return false on the elements events that you are binding to...

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

This worked for me.

I spent a few hours trying to get this to work today. Using the .formwizard("show","new_step") method to skip steps didn't work for me. I was unable to prevent the transition to step 3 and override to step 4 of my form in the .bind("step_shown",function(){...}) method , so I used the hidden input "link" class approach. I embedded a hidden field when a certain radio button (on step 2) was selected for either a free or pay account that meant step 3 could be skipped entirely (no billing details needed for a free account). I identified the step to jump to using the "link" class on the hidden input.

DOM has the following field which is in div of the currently visible step:

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

javascript has the following:

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

Note that this code only runs on step 2 since the radio button is only available then. Step 3 is successfully skipped when "Next" is hit with the free account selected, and if the back button is used on step 4, the user returns to step 2. And if the user decides they want a pay account and goes back to step 2 to mark as such, the hidden input is removed, once again causing step 3 to be shown next (and billing info will be shown on the summary page).

It's not well documented, but the plugin will go to whatever step is in the "value" attribute of an active input on the current step once the "Next" button is clicked. As seen above, the value is fourthStep. And, just to be thorough, I just tested and jumping over any number of steps is possible, and the back button will properly get you back to the correct place.

You are doing it right as you can see from the working example below.

example code at thecodemine.org

The problem you are experiencing is in most cases related to invalid (X)HTML (and in most cases only visible in webkit based browsers). So if I were you, I would try to clean up the HTML and see if that fixes it. Use the validator at: _http://validator.w3.org to validate the HTML.

Hope this helps