I am using multiform for survey project. I am using fieldsets in form to display a single form each time. my problem is that eveything works fine but when user refreshes the page it takes user to the first form which is wrong it should keep user on the current form. I couldn't find the best solution yet the code which I am using is here

$(document).ready(function() {
  var current = 1,

    steps = $("fieldset").length;
  $(".next").click(function() {

    var form = $("#workbook_form");
    form.validate();
    if (form.valid() == true) {
      // $('.timer').countimer('start');
      current_step = $(this).parent();
      next_step = $(this).parent().next();
      next_step.show();
      current_step.hide();
      setProgressBar(  current);
    }
  });


  $(".previous").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();

    setProgressBar(--current);
  })
  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep) {
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent   "%");
    $(".percent").html(percent   "%");

  }

});

#workbook_form fieldset:not(:first-of-type) {
  display: none;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="workbook_form" name="workbook_form" method="post">
  <fieldset>
    <input type="button"  value="Next" />
  </fieldset>
</form>

CodePudding user response：

The problem is that you are not saving the current form state. True, you have assigned it to a variable, but the variable also reassigns if the user refreshes the website.

Here, a fairly simple approach to save the user state

  const useState = (stateId) => {
            const setState = (newState) => localStorage.setItem('state_'   stateId, newState);
            const getState = () => localStorage.getItem('state_'   stateId)
            return [getState, setState];
        }

Here is your code

        $(document).ready(function () {
            const [state, setState] = useState(1);
            if (state() == null) {
                setState(1);
            }

            steps = $("fieldset").length;
            $(".next").click(function () {

                var form = $("#workbook_form");
                form.validate();
                if (form.valid() == true) {
                    // $('.timer').countimer('start');
                    current_step = $(this).parent();
                    next_step = $(this).parent().next();
                    next_step.show();
                    current_step.hide();
                    setProgressBar(setState(state()   ));
                }
            });


            $(".previous").click(function () {
                current_step = $(this).parent();
                next_step = $(this).parent().prev();
                next_step.show();
                current_step.hide();

                setProgressBar(setState(state() --);
            })
            setProgressBar(state());
            // Change progress bar action
            function setProgressBar(curStep) {
                var percent = parseFloat(100 / steps) * curStep;
                percent = percent.toFixed();
                $(".progress-bar").css("width", percent   "%");
                $(".percent").html(percent   "%");

            }

        });

CodePudding user response：

So below I've created an example for simply navigating between fieldset groups and restoring the current group on reload. However, there are a number of things to concider:

1. The use of jQuery Validation Plugin to prevent next/prev will cause issues due to it validating the entire form in one go and not by individual fieldset.
2. The restoring of field values when the page is reloaded.

For this I've created a custom plugin that handles the show/hiding of fieldsets and can be triggered on load or on click with the below. I took this approach as the main plugin can be somewhat extendable to allow for the addition of field validation and value storing.

Triggerable events

// Go to next fieldset (if has one)
$form.trigger( 'next' );

// Go to previous fieldset (if has one)
$form.trigger( 'prev' );

// Go to specific fieldset
const fieldsetIndex = 4;
$form.trigger( 'goto', [ fieldsetIndex ] );

Attachable events

The plugin also fires an event once the fieldset has changed which we can utilise to store the current fieldset index...

$form.on( 'went', function( event, data ) {
  sessionStorage.setItem( 'fieldsetIndex', data.current );
} );

The data object passed in the went event above includes the following:

/**
 * @var {Number} current The current fieldset index.
 * @var {Number} minIndex The minimum fieldset index.
 * @var {Number} maxIndex The maximum fieldset index.
 * @var {Number} percent The current fieldset percentage.
 * @var {jQuery} $target The current fieldset jQuery object.
 * @var {jQuery} $others All the other (non-active) fieldset jQuery objects.
 */

Code and example

The code and working example can be found here: https://jsfiddle.net/thelevicole/qm7w51h4/

You can also watch a screenrecording of the above example here: https://www.youtube.com/watch?v=-gdIggGnZ2M