Develop Reference

On button click get text of many divs with the same class and paste it inside input fields with the same class using javascript

I have three input fields with the same css class price-input and i want after clicking on the button with id set-price-btn to fill them with the default price displayed at the bottom of each input field using pure JavaScript.
Here is my code but doesn't work. What I am doing wrong?
var setpricebtn = document.getElementById("set-price-btn");
var items = document.getElementsByClassName("name");
var priceinputs = document.getElementsByClassName("price-input");
setpricebtn.addEventListener("click", () => {
for (var i = 0; i < items.length; i++) {
var savedprice = items[i].innerText;
priceinputs.value = savedprice;
}
});
.toolbar {
width:100%;
overflow:hidden;
margin-bottom:30px;
}
.btn {
width:auto;
display:inline-block;
padding:10px;
text-align:center;
background:#e8e8e8;
cursor:pointer;
border-radius:4px;
font-weight:bold;
font-size:12px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="toolbar">
<div class="btn btn-primary" id="set-price-btn"> Set price to all fields </div>
</div>
<div class="row">
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 150 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 175 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 547 </span>
</div>
</div>

In your javascript, change priceinputs.value to priceinputs[i].value will resolve the issue.

This should solve your problem. You need to add [i] in your priceinputs.value in order to differentiate each element.
var setpricebtn = document.getElementById("set-price-btn");
var items = document.getElementsByClassName("name");
var priceinputs = document.getElementsByClassName("price-input");
setpricebtn.addEventListener("click", () => {
for (var i = 0; i < items.length; i++) {
var savedprice = items[i].innerText;
priceinputs[i].value = savedprice;
}
});
.toolbar {
width:100%;
overflow:hidden;
margin-bottom:30px;
}
.btn {
width:auto;
display:inline-block;
padding:10px;
text-align:center;
background:#e8e8e8;
cursor:pointer;
border-radius:4px;
font-weight:bold;
font-size:12px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="toolbar">
<div class="btn btn-primary" id="set-price-btn"> Set price to all fields </div>
</div>
<div class="row">
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 150 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 175 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 547 </span>
</div>
</div>

priceInputs is also an array-like object like items so you need to access each input by index just like items[i]. Change priceInputs.value to priceInputs[i].value. Below example uses .querySelector() and .querySelectorAll() but other than that nothing but the bracket notation [i] is different. Also removed #id because it'll just be a hindrance in the future.
var btn = document.querySelector(".btn");
var items = document.querySelectorAll(".name");
var prices = document.querySelectorAll(".price-input");
btn.addEventListener("click", () => {
for (var i = 0; i < items.length; i++) {
prices[i].value = items[i].innerText
}
});
.toolbar {
width: 100%;
overflow: hidden;
margin-bottom: 30px;
}
.btn {
width: auto;
display: inline-block;
padding: 10px;
text-align: center;
background: #e8e8e8;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="toolbar">
<div class="btn btn-primary"> Set price to all fields </div>
</div>
<div class="row">
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 150 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 175 </span>
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<span class="name"> 547 </span>
</div>
</div>

How can I validate a multi page form with html 5 javascript required before moving to the next page

There is two functionality going on one is submit in button which is not recognized. In js $(".next").click(function(){..} functionality is functioning.
HTML
There are 4 fieldsets used here. I want each to be validated before going to the next page but failed to do this.
<div id="sellerregsetup" class="sellerregsetup">
<!--alert line code-->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Complete all steps below to start selling
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--End alert line code-->
<!--testing-->
<div class="row justify-content-center ">
<div class="col-md-12 text-center p-0 ">
<div class="card px-0 pt-4 pb-0 ">
<div class="row">
<div class="col-md-12 mx-0">
<form id="msform" action="/action_page.php" class="was-validated" >
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="account"><strong>Account</strong></li>
<li id="personal"><strong>Personal</strong></li>
<li id="payment"><strong>Payment</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul> <!-- fieldsets -->
<fieldset>
<div class="form-card">
<h2 class="fs-title">Address</h2>
<div class="form-group">
<input type="text" class="form-control" id="Fname" name="Fname" placeholder="First Name" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback" style="display:none">Please fill out this field.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="Lname" name="Lname" placeholder="Last Name" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback" style="display:none">Please fill out this field.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="addr1" name="addr1" placeholder="Address Line 1" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback" style="display:none">Please fill out this field.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="addr2" name="addr2" placeholder="Address Line 2" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback" style="display:none">Please fill out this field.</div>
</div>
</div>
<!--<input type="button" name="next" class="next action-button" value="Next Step" />-->
<button type="submit" name="next" class="btn btn-Gorange next " value="Next Step" >Next Step</button>
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">GSTIN</h2> <input type="text" name="fname" placeholder="GSTIN" />
<button type="submit" name="submit" class="btn btn-Gorange submit " value="submit">Submit</button>
</div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Bank</h2>
<input type="text" name="ano" placeholder="Account Name" />
<input type="number" name="ano" placeholder="Account Number" />
<input type="number" name="ano" placeholder="IFC code" />
<input type="number" name="ano" placeholder="cif number" />
</div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="make_payment" class="next action-button" value="Confirm" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title text-center">Success !</h2> <br><br>
<div class="row justify-content-center">
<div class="col-3"> <img src="https://img.icons8.com/color/96/000000/ok--v2.png" class="fit-image"> </div>
</div> <br><br>
<div class="row justify-content-center">
<div class="col-7 text-center">
<h5>You Have Successfully Signed Up</h5>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!--testing-->
</div>
javascript
I tried using onsubmit instead of click event but it doesn't work. I am not that great in Js. If some can help me in figuring what's wrong or missing would be a great help.
$(document).ready(function(){
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
$(".next").click(function(){
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$("#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) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({'opacity': opacity});
},
duration: 600
});
});
$(".previous").click(function(){
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$("#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) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({'opacity': opacity});
},
duration: 600
});
});
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});
$(".submit").click(function(){
return false;
})
});

Without testing it appears that (at least one of) your issue(s) is that the form is submitting before the JS validation runs. There are a few ways to prevent that from happening. One way is to capture the click event and prevent it from following through
$(".next").click(function(e){
...
e.preventDefault();

Give back button to bootstrap steps

I am using this steps plugin/code on my site:
https://bootsnipp.com/fullscreen/RlOe3
What i want, is that when i am on the second or third tab, i want to show a back button to the previous div/step.
If i add the button with class="backBtn", how can i go back with the javascript?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});

Below you have a working example. I used the code from the link you provided. What I did was the following:
added two back buttons => <button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
looked how the next function is implemented and reverse the behavior
I also disable the next step when you press back, as it should be. If you also want to clear the values, in can be easily done, but that's your homework.
Cheers!
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allBackBtn = $('.backBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
allBackBtn.click(function() {
var curStep = $(this).closest(".setup-content");
var curStepBtn = curStep.attr("id");
var currStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().children("a");
var prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.trigger('click');
currStepWizard.attr("disabled", "disabled");
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Email" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>

Bootsnipp Step Wizard not rendering correctly

I'm trying to learn Bootstrap / play around with Bootsnipp.
I have copied the HTML, CSS and JS from the link (although I think I have redundancy here): http://bootsnipp.com/snippets/e3MBM
1) Is it Redundant to add the CDN link and the actual CSS and JS (From what I understand the latter would only be if I host the CSS and JS files locally? Can someone confirm this?
2)The damn thing doesn't work the way it is supposed to:
Is theirs - with each step shown separately.
Mine, on the other hand has everything together:
It's probably something so stupid and simple, but I have no idea.Can someone please help?
I tried JSFiddle *First time using it, looks easy, but I hope I've got it right :)
<!DOCTYPE HTML>
https://jsfiddle.net/vvstafo2/1/

You forgot to add bootstrap JS and CSS file thats why its conflict over there, Would you please once try with the below code?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>

Use js or jQuery to make icon linked to fieldset once it is activated

I am using a bootstrap template I found online to create a simple multi-step form. The template has some icons across the top that identify where the user is in the form completion process. Once they complete the form step and select the next button, the icon map at the top advances to the next step and the previous step is now activated (color changed).
I want to be able to make these icons an active link once the user has completed the step so they can quickly navigate back to a previous step (fieldset) by clicking on the icon. If they have not yet completed the step, then the icon link should not be active. How can I make the icons an active link to their associated steps once they have been activated? Below is my html and js and here is my jsfiddle link: https://jsfiddle.net/93r5y1g3/5/.
HTML:
<body>
<!-- Top content -->
<div class="top-content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<form role="form" action="" method="post" class="f1">
<h3>Register To Our App</h3>
<p>Fill in the form to get instant access</p>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>about</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>account</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>social</p>
</div>
</div>
<fieldset id="aboutInfo">
<h4>Tell us who you are:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">First name</label>
<input type="text" name="f1-first-name" placeholder="First name..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">Last name</label>
<input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-about-yourself">About yourself</label>
<textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset id="accountInfo">
<h4>Set up your account:</h4>
<div class="form-group">
<label class="sr-only" for="f1-email">Email</label>
<input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control" id="f1-email">
</div>
<div class="form-group">
<label class="sr-only" for="f1-password">Password</label>
<input type="password" name="f1-password" placeholder="Password..." class="f1-password form-control" id="f1-password">
</div>
<div class="form-group">
<label class="sr-only" for="f1-repeat-password">Repeat password</label>
<input type="password" name="f1-repeat-password" placeholder="Repeat password..." class="f1-repeat-password form-control" id="f1-repeat-password">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset id="socialInfo">
<h4>Social media profiles:</h4>
<div class="form-group">
<label class="sr-only" for="f1-facebook">Facebook</label>
<input type="text" name="f1-facebook" placeholder="Facebook..." class="f1-facebook form-control" id="f1-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="f1-twitter">Twitter</label>
<input type="text" name="f1-twitter" placeholder="Twitter..." class="f1-twitter form-control" id="f1-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="f1-google-plus">Google plus</label>
<input type="text" name="f1-google-plus" placeholder="Google plus..." class="f1-google-plus form-control" id="f1-google-plus">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
JavaScript:
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if ($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({
scrollTop: scroll_to
}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if (direction == 'right') {
new_value = now_value + (100 / number_of_steps);
} else if (direction == 'left') {
new_value = now_value - (100 / number_of_steps);
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Form
*/
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
// fields validation
if (next_step) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
}
});
// previous step
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
});
// submit
$('.f1').on('submit', function(e) {
// fields validation
$(this).find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});

Previous steps are marked with the class .activated.
So you may add an event handler which triggers the previous button like this:
$(document).on('click', '.f1-step.activated .f1-step-icon', function() {
$('.f1-buttons .btn.btn-previous').trigger("click");
});