0

I've recently built a funeral cost calculator tool for a client using Jquery Steps.

The tool's form is quite complex, as a number of steps depend on whether certain form options have been selected.

I managed to accommodate this myself by using the "insert" and "remove" methods triggered "onchange" of the radio buttons. When the user selects that a death has occurred, there are 7 steps. When a user selects that a death has not occurred, there are 5 steps (see images attached). (See below for some sample code)

No death occurred (screenshot)

Death Occurred (screenshot)

The steps are inserted and removed at index 4. If a user toggles back and forth between the options, it will insert the 2, then remove the 2, insert the 2, then remove the 2, etc. I found this was simple enough.

Trouble came when further into the form I needed to apply a similar condition. However, I found that I couldn't specifically target an index to insert or remove at because I couldn't predict how many steps there were at this point (as it is based on the user's previous selection - see above).

My javascript knowledge is limited, so I'm at a loss. I know the logic needed to make it work, I just don't know how to implement it.

I want to know how I can use javascript/jquery to count the number of steps (in order to target the last step) and target the current step. Unless of course there's a simpler or better method that somebody can suggest.

I've been racking my brains over this, any help would be appreciated. Thank you!

<input type="radio" name="deathOccurred" rel="death-occured-yes" value="Yes"  class="required" onclick="calculateTotal()" onchange="$('#estimator-form').steps('insert', 4, {
    title: 'Clergy/Celebrant',
    content: '<STEP HTML HERE>'
});
$('#estimator-form').steps('insert', 5, {
title: 'Other options',
content: '<STEP HTML HERE>'
/> Yes &nbsp;&nbsp;
<input type="radio" name="deathOccurred" rel="death-occured-no" value="No" checked  onclick="calculateTotal()" onchange="$('#estimator-form').steps('remove', 5, {});  $('#estimator-form').steps('remove', 4, {});" /> No
user2789786
  • 3
  • 1
  • 3

2 Answers2

1

If this is the plugin you are using, it doesn't seem to have a method size, or length as you would expect. Maybe you can figure out yourself by using jquery and count e.g. number of h1 elements.

var wizardLength = $("#estimator-form").find('h1').length;

So if you use method 'add' instead of insert, I suppose it will be appended last. And when you want to remove the last you can use 'remove' with index = wizardLength - 1.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
burktelefon
  • 988
  • 2
  • 8
  • 27
-2

I added this functionality to jquery.steps.js because I create the steps dynamically and I need to get step counts throughout my app. Here is what you need to add to the files to be able to get the total steps in the wizard:

In jquery.steps (around line 1360) add this code:

$.fn.steps.numberSteps = function (step)
{
    var state = getState(this);
    return state.stepCount;
};

In your HTML page's jquery code, I am declaring my wizard like this:

var wizard = form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "fade",
        stepsOrientation: "vertical",
        contentMode: 2,
        saveState: true,
        startIndex: 0,
        ....

Then use this call to get the number of steps:

var lastWizardStep =  wizard.steps("numberSteps");
lanrosta
  • 9