Am creating a step wizard using jquery-step library but I have failed to customize it. How can I customize it to replace the previous and next buttons when the user slides to the 3 step of "confirm in details" with yes or no buttons. This is the link to the jsfiddle with the work:
https://jsfiddle.net/Sunesis/xsd9ozrf/8/
$(function () {
$('#wizard').steps({
headerTag:"h2",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
if ( newIndex === 1 ) {
console.log('Verification Code')
}
if ( newIndex === 2 ) {
console.log('Confirm details')
}
if(newIndex === 3){
}
return true;
},
labels:{
finish: "✓",
next: "⇾",
previous: "⇽"
}
});
});
The easy way to do it would be use JQuery, you can access the button by $('a[href$="#previous"]'). To be able to use JQuery please add this link into your project <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>.
So try the code bellow, should work fine. In fiddle: https://jsfiddle.net/g1sxtLv0/3/
$(function () {
$('#wizard').steps({
headerTag:"h2",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
if ( newIndex === 1 ) {
console.log('Verification Code')
}
if ( newIndex === 2 ) {
console.log('Confirm details')
$('a[href$="#previous"]').html('No');
$('a[href$="#next"]').html('Yes');
}
if(newIndex === 3){
$('a[href$="#previous"]').html('⇽');
$('a[href$="#next"]').html('⇾');
}
return true;
},
labels:{
finish: "✓",
next: "⇾",
previous: "⇽"
}
});
});