Saturday, 8 September 2018

Show first form in multi step modal

I copied this code from the internet, from here

It is used to show multiple forms in a single modal by sliding off the old fieldset and sliding in the new fieldset.

      <div class="modal-content">

         <!-- MultiStep Form -->
         <div class="row">
            <div class="col-md-12 ">
               <form id="msform" name="flatform" ng-submit="addflatinfo(flat, flatform)" novalidate>
                  <div class="modal-header">
                   <h4 class="modal-title" id="exampleModalLabel">Add flat</h4>
                  </div>

                  <!-- First fieldset -->
              <fieldset class="firstFieldSet">
                     <h4>
                        adf
                     </h4>
                     <div class="row">
                     ....
                  <input type="button" name="nextOcc"
                     class="nextO action-button 
                     adFlatSecondFieldsetCl" 
                     value="Next" />
              </fieldset>
           <!--Second fieldset -->
              <fieldset class="secondFieldSet">
                     <h4>
                        adf
                     </h4>
                     <div class="row">
                     ....

             </fieldset>

It works ok but when I close the modal when I'm in the 2nd or 3rd or 4th fieldset, it shows where the fieldset where I stopped. So I tried to do what the pervious button would do(slide out the current fieldset and show the previous) whenever I click the button to open the modal.

I have 5 fieldsets in my application. I keep track of current fieldset and when opening the modal again, I slide out the fieldset that was there before closing the modal and show the first fieldset.

But this is not ok.. I see a smaller fieldset over a bigger fieldset and sometimes I don't see anything but the modal header and sometimes just a small fieldset like the image below it's all messed up.

How do I show the first fieldset always when I open the modal?

The code to show next fieldset when a button with class .nextO is clicked.

current_fs = $(".nextO").parent();
        next_fs = $(".nextO").parent().next();

        //activate next step on progressbar using the index of next_fs
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

        //show the next fieldset
        next_fs.show(); 
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale current_fs down to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. bring next_fs from the right(50%)
                left = (now * 50)+"%";
                //3. increase opacity of next_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({
                    'transform': 'scale('+scale+')',
                    'position': 'absolute'
                });
                next_fs.css({'left': left, 'opacity': opacity});
            }, 
            duration: 800, 
            complete: function(){
                current_fs.hide();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });

The code to go to previous fieldset(which is what I use when the modal is first opened so that it always shows the first).

if(animating) return false;
    animating = true;
    //fade remove the fieldset which was open before closing the modal -- $scope.currentAdFieldset 
    current_fs = $($scope.currentAdFieldset).parent();
    previous_fs = $('.adFlatSecondFieldsetCl').parent().prev();
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    console.log(previous_fs, "prevfs");
    previous_fs.show(); 
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left,  });
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});

        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });

Is there a proper way to show the first fieldset when I open the modal. This is what it looks like. The fieldset does not fill the modal img



from Show first form in multi step modal

No comments:

Post a Comment