Enhance User Experience with a Multi Step Form incorporating a Progress Bar, designed with jQuery and CSS3. Resolve issues with

I downloaded a similar "Multi Step Form with Progress Bar using jQuery and CSS3".

I managed to display the fieldsets with divs for additional forms or images, so showing the content in the fieldset is not an issue. However, the problem lies with the actual button, specifically the next button, which doesn't work unless placed outside the div.

This is problematic because the button (as well as the previous button) on the next fieldset needs to be inside a div (for styling purposes).

While it advances to the next step, I encountered a issue where the button just disappears. It seems to move left and then fade away. :)

<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<button type="button" class="next action-button btn btn-primary">
  Next Step</span>
</button>   

On the other hand, this one does not have the issue:

<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<div class="pull-right">
  <button type="button" class="next action-button btn btn-primary">
      Next Step
  </button>                  
</div>

The button just disappears. Well moves left, then fades. :) The code I have is below.

//jQuery time
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

$(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();

...

Answer №1

When you click the next button, the jQuery code uses $.parent() to target the current fieldset and $.parent().next() to target the next fieldset. However, if you wrap the next button in a div, the div becomes the parent instead of the fieldset. To fix this, you can change current_fs and next_fs to find the closest fieldset using $.closest('fieldset') instead of $.parent().

// Modified jQuery code
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

$(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).closest('fieldset');
next_fs = current_fs.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'
});
});

$(".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();
animating = false;
}, 
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});

$(".submit").click(function(){
return false;
})
/* Additional CSS styles here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8>
  <title>Multi Step Form with Progress Bar using jQuery and CSS3</title>
      <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- Your HTML form code here -->
</body>
</html>

Answer №2

Thanks once more, Michael. I consider this question resolved now :)

Here is the updated code for enabling inputs and buttons within div elements inside the fieldset for the "Multi Step Form with Progress Bar using jQuery and CSS3"

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties that will be animated
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).closest('fieldset');
    next_fs = current_fs.next();

    //activate the next step on the progress bar 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'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).closest('fieldset');
    previous_fs = current_fs.prev();

    //de-activate current step on progress bar
    $("#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();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending form input values to JavaScript

Struggling to design a webpage featuring one text box and a button that, when clicked, sends the value to Javascript for further processing? After spending significant time troubleshooting, I'm unsure of what's causing the issue. Below are both t ...

Trouble with executing action after submitting form using jQuery and AJAX

I'm currently working on implementing form validation and submission using jQuery and AJAX. For the most part, everything is functioning as expected. However, there is a small snippet of code causing an issue: alert ('Validation success'); ...

Does Cluetip have the capability for a delayed hover feature?

I am interested in utilizing the hover feature of the cluetip jquery plugin. I have a scenario where I want to trigger an ajax request on hover, but only if the link is highlighted for a certain period before the loading image appears. This way, accidental ...

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

jQuery UI Datepicker extending beyond its bounds

My Datepicker is expanding and filling the entire screen. What could be causing this issue? Here is my code: Additionally, how can I change the date format in jQuery to appear as dd-mm-yyyy? https://i.stack.imgur.com/IQzVV.png HTML: <!DOCTYPE html&g ...

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link re ...

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

Defining the style class for a nested Angular 2 component

Located inside my.component.html <nested-component [class]="nestedClass"></nested-component> Now, when wanting to utilize my component, both style classes need to be specified: <my-component class="my-component-style" nestedClass="nested- ...

Using the combination of PHP, AJAX, and MySQL, one can create a select filter that utilizes xmlhttp.open

After following the example from http://www.w3schools.com/php/php_ajax_database.asp, I successfully created a table echoing data from a database. However, my attempts to implement the datatables plugin on the table have been unsuccessful. Despite setting ...

Displaying a div in Vue.js when a button is clicked and an array is filled with

Hey there! I'm having an issue with displaying weather information for a specific location. I want to show the weather details in a div only when a button is clicked. Despite successfully fetching data from the API, I'm struggling to hide the wea ...

Encountering issues with styled component's flex not functioning as expected in React

I am currently working with styled-components, and I have been using "flex" for responsive design. However, I am facing some challenges in implementing it. The CSS defined within styled-components does not seem to be applying properly. The styles are not ...

Encountering ERR_BLOCKED_BY_XSS_AUDITOR while attempting to download a file through selenium

I am currently attempting to download a file using selenium by replicating a click on a download button, but Chrome is indicating an error with ERR_BLOCKED_BY_XSS_AUDITOR. Even when I try to bypass this by utilizing the "--disable-xss-auditor" argument, th ...

Hide the dropdown menu when the user clicks anywhere else on the screen

I have a scenario with 2 dropdown buttons. When I click outside the dropdown or on it, it closes. However, if I click on the other dropdown button, it does not close and the other one opens. I want them to close when I click on the other button or anywhere ...

What is the best way to utilize data attributes of select options when applying a jQuery filter?

I'm currently working on implementing a dependent dropdown feature without being able to use the value attribute. I came across a codepen that does exactly what I need, although it uses value. So I decided to fork it and modify the value attribute to ...

Utilizing Google ReCaptcha and the Parsley validation library

I need to ensure that users cannot submit a form without completing the captcha field. How can I achieve this using Parsley.js? Which field should be marked as required? In my ASP.NET Razor webpage, I have a JavaScript callback function that validates the ...

Emulating form functionality: How to programmatically open a link using PHP

Do you want to provide package tracking on your website like DHL does? With DHL, users can track their packages by visiting a specific URL, such as . When a tracking number is entered, it opens a new window with the following format: SOMENUMBER1234 If you ...

Having trouble retrieving input data in XML format, resulting in a TypeError: 'NoneType' object does not support item assignment

Can you please help me figure out what I did wrong? I managed to create data successfully in JavaScript, but whenever I try in Python, I keep encountering this error: getVals = list([val for val in partner_name[:25] if val.isalnum()]) #limit the domai ...

I am struggling to create a responsive HTML/CSS/Bootstrap file that can adapt to all screen sizes

Exploring the world of web development for the first time and seeking guidance on how to make file elements responsive to accommodate any screen size or resolution. Assistance would be greatly appreciated! Here's a snippet of my code: `\<!DOCT ...

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

Using jQuery Datepicker Beforeshowday to dynamically retrieve an array of unavailable dates through Ajax

Currently, I am working on implementing a datepicker that will update an array of unavailable dates. While it successfully works with a PHP variable being passed, the challenge lies in properly returning the data for the option (as it is throwing a console ...