Tools I'm currently utilizing:
HTML, CSS, Javascript, Bootstrap 3
Library / Package in use:
https://codepen.io/designify-me/pen/qrJWpGHello there! I am attempting to customize a Codepen-based Bootstrap Multistep Form from the provided link above.
My Alternative Approach
https://i.sstatic.net/1cYSc.png
My issue arises when clicking the Next button and then trying the functionality of going back using the Previous button, causing the current form to be disrupted. Despite my attempts at modifying the JavaScript codes, nothing seems to work
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var participants;
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).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'
});
$("#rname").val($("#name").val())
$("#remail").val($("#eemail").val())
$("#rcontact").val($("#contact").val())
$("#rcompany").val($("#company").val())
participants = $("input[name='participants[]']")
.map(function(){return $(this).val();}).get();
// alert(participants)
$("#rparticipants").val(participants)
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_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 previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
// current_fs.css('display', 'none');
animating = false;
// current_fs.hide();
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
Screenshots illustrating the issue described
After selecting the "Next" button from the initial screenshot above
https://i.sstatic.net/7DZBE.png
Subsequently clicking the "Previous" button for editing functions
https://i.sstatic.net/WXZUu.png
Actions taken to resolve the problem
In an attempt to troubleshoot, I removed the current_fs.hide() code from the "previous" javascript function
complete: function(){
//current_fs.hide();
// current_fs.css('display', 'none');
animating = false;
// current_fs.hide();
},
The first step remains visible, but the second step appears hidden, making the Add button inaccessible for adding additional participants, indicating an overlapping of elements from the hidden second step
https://i.sstatic.net/N5I46.png
Could you please provide assistance regarding this predicament? How can I ensure that clicking the Previous button does not disrupt the website? Also, note that I am employing the Laravel Blade Templating engine.
Here is the full code: Source Code