On document ready, this function performNext
calls fine:
$(document).ready(function() {
performNext();
});
performNext
function hides a current fieldset and shows a next one, my question here is an extension of another question with minimal reproducible example I asked here
But it doesn’t get called on keydown
:
$(document).on("keydown", (e) => {
if (e.key === "F1") {
e.preventDefault();
performNext();
console.log("F1");
};
});
performNext function:
function performNext() {
console.log("performNext started");
var current_fs, next_fs; //fieldsets
var opacity;
var current = 1;
var steps = $("fieldset").length;
$(".next").click(function() {
$current_fs = $(this).closest("fieldset");
$next_fs = $current_fs.next();
//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: 500
});
});
$("#msform").on("submit", function(e) {
e.preventDefault()
})
console.log("performNext ended");
}
Tried this answer but not working.
console.log("performNext started");
console.log("performNext ended");
console.log("F1");
Are all logged in console, so mapping the F-key works. What am I missing?
2
Answers
Your logic is not good. You’re creating click and submit handlers inside a function chat can be potentially called multiple times. The events will add up on top of existing ones. Therefore
$(".next").click(function() {
and$("#msform").on("submit", function(e) {
should not be part of theperformNext
function. Also your 13 lines of$current_fs.animate({
can be achieved in only a couple of CSS lines using the CSStransition
property. Rather, use an index to navigate your fieldsets and store the desired index in your button’sdata-*
attribute:If you want to press F1 and focus on the next
<fieldset>
, you could try the following procedure: