bootstrap Archives

I will provide you with a simple jquery and HTML snippet to create a multi-step form with a progress bar using bootstrap with jQuery. There are many jQuery plugins available on the web which is providing the same functionality but I don't want spent time on the customization of plugins so I have created mine one which is more customizable and easy to understand and use. You can change functionality and HTML views as you want for your project. I have used bootstrap for front-end UI and jQuery for transition on the client side. This is a simple multi-step form example so I haven't added validation and animation etc functionality. I am sure you can easily add this functionality with this jQuery and HTML snippet. Also Checkout other useful jQuery tutorials, Simple Example of Pagination Using jQuery and BootstrapMulti Step Form with Progress Bar using jQuery and Bootstrap CSSSimple Example of Hide, Show and Toggle Element Using jQueryDynamically Add and Remove rows in a Table Using jquery Simple Example of Multi-Step Form Using jQuery and Bootstrap In this article, we will walk you through the steps to create an elegant and functional multi-step form with a progress bar. I am assuming you have knowledge of jquery and bootstrap or used them in previous web applications. Step 1: First, create a new index.html file and include jquery and bootstrap library files into the head section of this file. Here, I am using cdn and googleapi path for jquery and bootstrap files, You can also use these library files as a local Path and replace cdn path with your local storage files path. Step 2: Create the HTML markup for the multi-step form. We will be using Bootstrap CSS classes to create the layout of the form. Here is the basic HTML structure: Step 1: Create your account Email address Password Step 2: Add Personnel Details First Name Last Name Step 3: Contact Information Mobile Number Address in the above code, I have created 3 steps and added HTML fieldset control for each step, so whenever the user clicks the next and previous button we will slide the fieldset based on the current step. Step 3: Added CSS class in head section of index.html file to hide fieldset except first fieldset or Step. #regiration_form fieldset:not(:first-of-type) { display: none; } I have used a first-of-type css selector to show the first HTML fieldset and hide the rest of them, so whenever users come on the form field or reload, they will see the first step instead of all steps. Step 4: Defining the jQuery variable and navigation between steps using the below jQuery code, we will add the below code into the footer of index.html file using jquery $(document).ready() method. $(document).ready(function(){ var current 1,current_step,next_step,steps; steps $("fieldset").length; $(".next").click(function(){ 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+"%") .html(percent+"%"); } }); in the above jquery code, I have added a click event on .next and .previous button class and based on the button type click I am showing the HTML fieldset step form and filling progress-bar control. Step 5: Finally submit the form using the jquery submit method and added into the footer of $(document).ready() method. $( "#regiration_form" ).submit(function(event) { jQuery('.alert-success').removeClass('hide').html( "Handler for .submit() called and see console logs for your posted variable" ); console.log($(this).serialize()); event.preventDefault(); }); Once the user filled all the steps data and clicks submit button, The form will submit all data using the jquery submit() method and showing serialized data of the submitted form data. You can see JSON data into console of browser. You can download the source code and Demo from the below link. Live Demo Download Source Code

Category: bootstrap

Multi Step Form with Progress Bar using jQuery and Bootstrap CSS

Simple Bootstrap Form Layout Examples