Hi I need to modify jankoatwarpspeed’s form wizard. I needed to add a class that applies a style to visited steps as well as current step. No prob. Now I can’t get it to remove steps when you use the back button.
Code is at http://pastebin.com/YxZRDEda
Please Help! Thanks.
Its not really a validation thing, and IMO not a good idea. But the owner of my company saw it somewhere and liked it so here we are! The idea is those waivers are terribly boring and terribly long. There needs to be something that attracts attention to the signature/radiobutton as they are required. I think the way it is, with the orange combined with validation (yet to be set up) is fine, but he wants it to change the image on the left when someone simply clicks into the text box/hits radio button. So simply put its just a change of class to the parent li when you click in the box. Ill look into the replaceClass today. Really great stuff on the form wizard.
Thanks,
Kane
What are you wanting to improve about that code? There is a replaceClass extension that can help to tidy up the addClass/removeClass grouping.
Other than that though, what other type of improvement are you after?
added link to replaceClass extension
Yes, i swear by it. I use it for all validation and .ajax submissions. I will use it here when I get to validation. right now Im trying to add some .click functionality to change background images, my intention was whatever they enter, just as long as they click in the box to change the message. Ill use the validation plug in to validate minLength or some similar method. or could I use a validation call back to do it? Hadn’t gotten that far, simply wanted to change the parent li’s class when you enter the textbox, wasn’t a validation type issue.
thanks again for all your help.
Have you investigated using jQuery’s form validation plugin?
It provides all sorts of built-in techniques that simplify what you’re trying to create.
You have been very helpful, if you dont have more time to waste on me I totally understand. One other issue Im having right now is that on the “Exchange Agreement” Section where the inline forms are at (orange bar with “Action Required”) I want to change the class of warning (“Action Required” graphic) and replace it with class thanks (thank you graphic) when someone clicks on an input in the li. this is what I have ad it sucks. Sig is the id of one of the text inputs inputs, I know Ill have to make a function for each one so it doesn’t change all classes when one is clicked. or so I think.
<script type=“text/javascript”>
$(“#sig”).click(function() {
$(this).closest(‘li’).removeClass(“.warning”).addClass(“.thanks”);
});
</script>
works great. layout is being tweaked to give the li’s absolute positioning so I can use a graphic that has some overlap in it. I really do appreciate your help. Ive got some other issues now…much easier than these…
No, commented it out now.
This is what it could be:
function selectStep(pageIndex) {
$('#steps li')
.removeClass('current')
.each(function (stepIndex) {
if (stepIndex <= pageIndex) {
$("#stepDesc" + stepIndex).addClass("current");
}
});
}
You will definately want to rename the variables within the selectStep function
function selectStep(i,dir) {
$('#steps li')
.removeClass('current')
.each(function (j) {
if (j <= i) {
$("#stepDesc" + j).addClass("current");
}
});
if (dir == 'prev') {
$("#stepDesc" + (i + 1)).removeClass("current");
}
}
Is that extra part relating to dir even necessary? The third line should have already removed every single class called “current” from the all of the steps.
updated, structure only gfx still lacking but it gets the point across
No, because i is used for different situations throughout the script.
You would only want to rename i where it remains in the same context as it is used.
so just for the function you wrote.
As you’ve made some changes to it, I’ll need to advise based on the demo page at http://www.kinetick.com/FOO/purchase
Have you updated it yet?
is renaming them as simple as replacing all i’s with “foo” and all j’s with “bar” or something? as long as they are consistent? and throughout the entire script i would assume.
Now onto changing a parent li’s background image (via class) when you click on an input inside it!
i, j and k are common index values to use when you’re performing nested loops.
As i was already being used, j is the next obvious one to use for a loop so that we don’t clobber the pre-existing i.
Those variables really could be renamed though. i is the pageIndex and j is the currentIndex as you loop through each of the steps.
Man, thats awesome! had to tweak minorly (remove
else {
$(“#stepDesc” + (i - 1)).removeClass(“current”);
}
because it was deleting the class from the previous step, obviously. One question what is the j? i know i=index
You taught a man to fish!
thanks again!
Can you please explain the changes that you made, and possibly provide a test page that demonstrates the issue?
Something like the following?
$('#steps li')
.removeClass('current')
.each(function (j) {
if (j <= i) {
$("#stepDesc" + j).addClass("current");
}
});
You may also want to return false from the end of each of your click events for the prev and next buttons.
Awesome, Ill give it a shot. I really appreciate the time you took to help a stranger. I hope one day Ill make it look as easy as you do!