mahesh kumar
Reputation: 71
Unable to set the counter when clicking on the current button
I have 5 steps with Previous, Current & Next buttons and counter below it. I am able to move forward and backward with the help of Previous, Current & Next buttons. But, I am facing problem in the counter. I am considering Step-3 is current step. When I am clicking on Current button, I am able to come back to step-3 but the counter is not coming to 3 instead it is taking the last step number. Please check the code and help me with the issue.
var current = 1,
current_step, next_step, steps;
steps = $("fieldset").length;
var fieldset_count = steps.current;
if (current == '1') {
// $('#first-step a').add('disabled');
$('#first-step a.previous').prop('disabled', true);
};
if ($('fieldset').hasClass('last-step')) {
$('#last-step a.next').prop('disabled', true);
}
$(".next").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").next();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 + 1
});
});
$(".previous").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").prev();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 - 1
});
});
// Current button functionality
$(".current").on("click",function(){
current_step = $(this).parent("fieldset");
next_step = $("#current-step");
next_step.show();
current_step.hide();
var current_counter = $(this).parent("fieldset").attr('value');
$('.counter-step').text(current_counter);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/icofont/icofont.min.css">
</head>
<style>
.container fieldset:not(:first-of-type) {
display: none;
}
</style>
<body>
<div class="container">
<fieldset id="first-step" value="1">
<h4 class="mb-3 header">Step-1</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="2">
<h4 class="mb-3 header">Step-2</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="3" id="current-step">
<h4 class="mb-3 header">Step-3</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="4" >
<h4 class="mb-3 header">Step-4</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset class="last-step" id="last-step" value="4">
<h4 class="mb-3 header">Step-5</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>Upvotes: 1
Views: 58
Answers (2)
mahesh kumar
Reputation: 71
Below is the final code.
var current = 1,
current_step, next_step, steps;
steps = $("fieldset").length;
var fieldset_count = steps.current;
if (current == '1') {
// $('#first-step a').add('disabled');
$('#first-step a.previous').prop('disabled', true);
};
if ($('fieldset').hasClass('last-step')) {
$('#last-step a.next').prop('disabled', true);
}
$(".next").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").next();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 + 1
});
});
$(".previous").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").prev();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 - 1
});
});
// Current button functionality
$(".current").on("click",function(){
current_step = $(this).parent("fieldset");
next_step = $("#current-step");
next_step.show();
current_step.hide();
var current_counter = next_step.attr('value');
$('.counter-step').text(current_counter);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/icofont/icofont.min.css">
</head>
<style>
.container fieldset:not(:first-of-type) {
display: none;
}
</style>
<body>
<div class="container">
<fieldset id="first-step" value="1">
<h4 class="mb-3 header">Step-1</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="2">
<h4 class="mb-3 header">Step-2</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="3" id="current-step">
<h4 class="mb-3 header">Step-3</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="4" >
<h4 class="mb-3 header">Step-4</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset class="last-step" id="last-step" value="4">
<h4 class="mb-3 header">Step-5</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>Upvotes: 0
Clayton Engle
Reputation: 581
The current button you are clicking is within the active fieldset that you are currently on, NOT the value='3' fieldset. The 'this' context for the button that is being clicked is pulling the parent of the fieldset that is visible before being hidden, not the fieldset that shows afterwards.
Try passing next_step.attr('value') instead of $(this).parent("fieldset").attr('value')
Upvotes: 1
Related Questions
- Increment decrement buttons with Bootstrap and Javascript
- Increase counter value upon button click
- I can't figure out why the counter works on one button but not the other
- How can I make this click counter work properly?
- Button Clicks Counter
- Click Counter not working
- jQuery Click Counter
- JQuery Set value on button click
- jQuery Counter Not Working
- Button Counter not incrementing