SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Need help with jquery form wizard

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Can you please explain the changes that you made, and possibly provide a test page that demonstrates the issue?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thx for reply. I modified it so it validates each fieldset, not on final submit. This way if you have invalid form fields you cannot progress to the next step. Lastly I modified it to index the number of steps and each time you progress to a new one it applies a class to the "visited" step as well as the "current" step. I need it to remove the class of the previous current step if you hit the back button. You will see what I mean when you see example, go a couple forward and then hit the back button.

    http://www.kinetick.com/FOO/purchase

    code is in that pastebin link in first post.

    Thanks, I hope you can shed some light on this for me! Oh yeah, validation isn't set up on that page yet, but it has been set up to work and verified it does on a local test file. I dont think the two functions interact in anyway so validation shouldn't have any bearing on the problem at hand.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    With the selectStep function, instead of applying the class based on the current step, you could instead remove he class from all steps, then loop through them reapplying the class.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats what I was thinking, only better. Could I trouble you to show a quick example, Im in a real bind here both skill set wise and time wise. I would really appreciate it.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Something like the following?

    Code javascript:
    $('#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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DirtyBird View Post
    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!
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DirtyBird View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so just for the function you wrote.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DirtyBird View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    updated, structure only gfx still lacking but it gets the point across

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You will definately want to rename the variables within the selectStep function

    Code javscript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, commented it out now.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This is what it could be:

    Code javascript:
    function selectStep(pageIndex) {
        $('#steps li')
        .removeClass('current')
        .each(function (stepIndex) {
            if (stepIndex <= pageIndex) {
                $("#stepDesc" + stepIndex).addClass("current");
            }
        });
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  19. #19
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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?

    Edit:

    added link to replaceClass extension
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •