Self Created Form Wizard Need advice

Discussion in 'jQuery' started by shongale, May 21, 2012.

  1. #1
    I am creating a form wizard that is divided by the id="panel"+num
    I want to be able to go to the first panel every time I activate the process.
    Currently it remembers (I have no idea how and that bothers me) the last location and that is not acceptable because each time it is called we need to start at the beginning. It is a wizard and need to follow each step exactly.
    This code works awesome in all browser but cannot figure out how to reset to panel1.
    Here's the code
    $(function() {
    // Previous Panel
    $("#prevreserbut").button({ icons: {primary:'ui-icon-carat-1-w'}
    }).click(function(e)
    { // stop form submission
    e.preventDefault();

    // look at each panel - .form-panel is my class
    $(".form-panel").each(function(i)
    { // if it's not the last panel enable the next button
    ($(this).attr("id") != "panel-last") ? null : $("#nextreserbut").button("enable");

    // if the panel is visible fade it out
    ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("slow", function()
    { // add hidden class and show the next panel
    $(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function()
    { // if it's the first panel disable the back button
    ($(this).attr("id") != "panel1") ? null : $("#prevreserbut").button("disable");
    // remove hidden class from new panel
    $(this).removeClass("ui-helper-hidden");
    });
    });
    });
    return false;
    });


    // Next Panel
    $("#nextreserbut").button({ icons: {secondary:'ui-icon-carat-1-e'}
    }).click(function(e)
    { // stop form submission
    e.preventDefault();

    // look at each panel
    $(".form-panel").each(function(i)
    { // if it's not the first panel enable the back button
    //$(this).attr("id", "panel" + i);
    ($(this).attr("id") != "panel1") ? null : $("#prevreserbut").button("enable");


    // if the panel is visible fade it out
    ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("slow", function()
    { // add hidden class and show the next panel
    $(this).addClass("ui-helper-hidden").next().fadeIn("fast", function()
    { // if it's the last panel disable the next button
    ($(this).attr("id") != "panel-last") ? null : $("#nextreserbut").button("disable");


    // remove hidden class from new panel
    $(this).removeClass("ui-helper-hidden");
    });
    });
    });
    return false;
    });
    });
    Any help is greatly appreciated and I thank you profusely in advance.
     
    shongale, May 21, 2012 IP