How to write jquery function for previous button? - html

Question

I have created a step form with HTML & jquery which has next and previous buttons for navigating to different steps. I have written jquery function for next buttons, but could'nt do one for previous buttons. Please help me with code.
code to trigger next button
var allNextBtn = $('.nextBtn');
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');
});

Answer 1

I would suggest another approach to your problem:
You want to create a stepper
In the stepper, you would like to show pages of a form
The stepper needs to have controls: prev, next (, first, last?)
The controls should take form validation into account (on the current page)
You want to do DOM manipulation with jQuery
Consider the following snippet:
var currentPage = 1
jQuery(document).ready(function($) {
// init first page
updatePage(0)
jQuery(".btn.next").on('click', function(e) {
e.preventDefault()
// checking for last item & if page input fields are valid
const direction = ($('.page').length > currentPage && validatePage()) ? 1 : 0
updatePage(direction)
})
jQuery(".btn.prev").on('click', function(e) {
e.preventDefault()
// checking for fist item
const direction = 1 < currentPage ? -1 : 0
updatePage(direction)
})
})
// simple validation function
function validatePage() {
const inputValue = jQuery(`[data-page-order="${ currentPage }"]`).find('input').val()
return inputValue !== ''
}
// simple page visibility update function
function updatePage(direction) {
if (direction === 1 || direction === -1) {
currentPage += direction
$(".page.visible").fadeOut().removeClass('visible')
$(`[data-page-order="${ currentPage }"]`).fadeIn().addClass('visible')
} else {
$(".page.visible").removeClass('visible')
$(`[data-page-order="${ currentPage }"]`).addClass('visible')
}
}
form {
width: 50%;
}
.pages {
position: relative;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
.pages>.page {
display: block;
position: absolute;
display: none;
}
.pages>.page.visible {
display: block;
}
.controls {
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<form>
<div class="pages">
<div class="page" data-page-order="1">
<label for="input1">Input 1:
<input id="input1" type="text" />
</label>
</div>
<div class="page" data-page-order="2">
<label for="input2">Input 2:
<input id="input2" type="text" />
</label>
</div>
<div class="page" data-page-order="3">
<label for="input3">Input 3:
<input id="input3" type="text" />
</label>
</div>
</div>
<div class="controls">
<button class="btn prev">PREV</button>
<button class="btn next">NEXT</button>
</div>
</form>
</div>
You can see that with the manipulation of a single variable (currentPage) prev & next steps can be done - with validation rules, form pages appear/disappear with a fadeIn/fadeOutand all.
I do hope that this snippet gives you the idea about how to solve a problem like this - break it down to requirements that are simple and then don't overcomplicate :) Just add one feature at a time (like prev/next, validation, etc.).