Develop Reference

Set focus to the next input element

I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>
What I have tried so far is:
$(":input").keydown(function(event){
if (event.keyCode === 13) {
$(this).nextAll(':input:enabled').first().focus();
}
});
But this doesn't work as I expect.

next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.
What you can do however is:
Get a jQuery object of all the enabled inputs
var enabledInputs = $("input:enabled");
Get the index of the current input in that jQuery object using index()
var idx = enabledInputs.index(this);
Then using that index get the element at index+1 using eq()
enabledInputs.eq(idx+1).focus();
Demo
$(":input").keydown(function(event){
if (event.keyCode === 13) {
var enabledInputs = $("input:enabled");
var idx = enabledInputs.index(this);
enabledInputs.eq(idx+1).focus()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>

The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:
$(":input").keydown(function(event) {
if (event.keyCode !== 13) return;
$(this)
.parent()
.parent() // get to the `class=col-#` element
.nextAll(':input:enabled')
.first()
.focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>

If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:
if (event.keyCode === 13) {
// Get all enabled inputs in the document
var inputs = $('input:enabled');
// Iterate all inputs, searching for the index of the "next" input to "this"
for(var i = 0; i < inputs.length; i++) {
// If the "global" index of "this" input is found
if( $(inputs).eq(i).is( $(this) ) ) {
// Then select the "next" input by incrementing the index, and call
// focus on that input if it exists
inputs.eq(i + 1)
.css({ border : '1px solid red' }) // Added to help visualise focus, remove this line
.focus();
// Exit the loop now that focus has been called on "next" input
break
}
}
}
The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:
$("input").keydown(function(event){
if (event.keyCode === 13) {
var inputs = $('input:enabled');
for(var i = 0; i < inputs.length; i++) {
if( $(inputs).eq(i).is( $(this) ) ) {
inputs.eq(i + 1)
.css({ border : '1px solid red' }) // Added to help visualise focus, remove this line
.focus()
break
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>

How can I get the new value of an input with jquery

So I have these two input fields written in html:
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>
And I have some jquery code that returns me an error if either of the input fields remain empty:
if($('#doc-name').val() == '' || $('#doc-number').val =='') {
return false //this is completed with the actual error script but isn't important to the current issue
}
The issue that I actually have is that even after I complete the input fields, the .val() command still return an empty string, it is not returning what I actually wrote in those inputs. .html() or .text() also return something empty. Can you please point me in the right direction ?

Not sure if this is what you mean. But I've created a sample here where every click event it will get the value of the input fields.
<input type="text" id="name"/>
<input type="text" id="number"/>
<button id="getvalue">Get value</button>
Here's the js
$(document).ready( function(){
$('#getvalue').click( function() {
var nameVal = $('#name').val();
var numVal = $('#number').val();
if(nameVal == '' || numVal == ''){
alert('Empty fields.')
}else{
alert('Name is ' + nameVal + ' and Number is ' + numVal);
}
});
});
You need to have a trigger event in order for javascript to communicate with your html elements. In this case we are using a click event through button element.
Here's a working sample

It should be '#doc-name' and '#doc-number':
if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
alert('Error');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>

When you return false from an event handler it prevents the default action for that event and stops the event bubbling up through the DOM. That is, it is the equivalent of doing this:
if($('#doc-name').val() == '' || $('doc-number').val == '') {
alert('ok');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>

It depends on where/when you are calling that piece of code. In the example below it will execute on pressing a submit button.
https://jsfiddle.net/wy8z7b2k/
$('#submit').click(function(e) {
if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
console.log('returning false');
return false //this is completed with the actual error script but isn't important to the current issue
}
});
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<button id="submit">Submit</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JavaScript - How to navigation one textbox to another textbox using arrow key

JavaScript - How to navigation one textbox to another textbox using arrow key
I have many code test but not working please see below my html code and JavaScript Code
<div class="col-md-12" style="margin-top: 15px;">
<div class="col-md-2">
<div class="form-group">
<label>Date & Time</label>
<input name="date_and_time" class="form-control" readonly value="<?=date('Y-m-d H:i:s')?>" type="text">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Invoice Number</label>
<input name="invoice_number" class="form-control" readonly value="39" type="text">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Search Customer by Mobile / Name</label>
<input name="customer_search_mobile_name" class="form-control" value="" type="text">
</div>
</div>
</div>
JavaScript Code
<script type="text/javascript">
$(document).keydown(
function(e)
{
if (e.keyCode == 39) {
$(".form-control:focus").next().focus();
}
if (e.keyCode == 37) {
console.log('hi');
$(".form-control:focus").prev().focus();
}
}
);
</script>

Try this Code:
Plunker Link
HTML
<div class="col-md-12" style="margin-top: 15px;">
<div class="col-md-2">
<div class="form-group">
<label>Date & Time</label>
<input name="date_and_time" class="form-control" value="<?=date('Y-m-d H:i:s')?>" type="text">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Invoice Number</label>
<input name="invoice_number" class="form-control" value="39" type="text">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Search Customer by Mobile / Name</label>
<input name="customer_search_mobile_name" class="form-control" value="" type="text">
</div>
</div>
</div>
JS
var isShift = false;
$("input").keydown(function(e){
if(e.keyCode==16)
isShift = true;
if ((e.keyCode==40 || e.keyCode==39) && !isShift) {
$(this).parent().parent().next().find('input').focus()
}
else if ((e.keyCode==37 || e.keyCode==38) && !isShift) {
$(this).parent().parent().prev().find('input').focus()
}
});
$("input").keyup(function(e){
if(e.keyCode==16)
isShift = false;
});

<input class="my_input">
<input class="my_input">
<input class="my_input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.my_input').keyup(function(e) {
if (e.keyCode == 39) {
var inputs = $('.my_input'); // array of all inputs
var index = inputs.index(this); // search which of the inputs is active
var newIndex = (index+1) % inputs.length; // index + 1, but cycle back to 0
$('.my_input').eq(newIndex).focus();
}
if (e.keyCode == 37) {
var inputs = $('.my_input'); // array of all inputs
var index = inputs.index(this); // search which of the inputs is active
var newIndex = index - 1; // index - 1
if(newIndex<0) {
newIndex = inputs.length - 1; // cycle to last element
}
$('.my_input').eq(newIndex).focus();
}
return true;
});
</script>

Second Time Checkbox Not Working

I have created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:

There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.

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");
});