jquery register multiple keypress events on page

Question

I have a form that I am using 'next' and 'previous' buttons to navigate through by showing or hiding each subsequent field.

<ol class="fs-fields">
                <ul>
                    <label>{{form.project_name.label_tag}}</label>
                    <input id="id_project_name" name="project_name" type="text" placeholder="Project Name" required/>
                    <button type="button" class="fs-next">Next</button>
                </ul>
                <ul>
                    <label>{{form.project_orgName.label_tag}}</label>
                    <input id="id_project_orgName" name="project_orgName" type="text" required>
                    <button type="button" class="fs-next">Next</button>
                    <button type="button" class="fs-previous">Back</button>
                </ul>
                <ul>
                    <label>{{form.project_orgWebsite.label_tag}}</label>
                    <input id="id_project_orgWebsite" name="project_orgWebsite" type="text" required>
                    <button type="button" class="fs-previous">Back</button>
                    <button type="submit" name="next" class="next action-button" value="">Submit for Review</button>
                </ul>
            </ol>

I would like to run this function each time the next button is pressed or enter is pressed while the input form is selected:

$(document).ready(function() {

$('input').focus();
clickNext();
clickPrevious();
nextOnEnter();
i = 1;

})


function clickNext() {
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".fs-next").click(function() {        
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    // //activate next step on progressbar using the index of next_fs
    // $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");


    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
            //show the next fieldset
            next_fs.show(); 
            $('input').focus();
            $('.dot' + i.toString()).addClass('completed')
            $('.dot' + i.toString()).removeClass('current')
            i = i+1;
            $('.dot' + i.toString()).addClass('current')
        }, 
    });
});
}

function nextOnEnter() {
$('input').keypress(function(e){
    if(e.which == 13){//Enter key pressed
        $('.fs-next').click();//Trigger search button click event
    }
});
}

This function works great the first time but it works only once:

Could someone help me understand to have the nextOnEnter() function work more than one time?

Answer 1

I will fix some parts of your code, since, for example, when you are doing $('input').focus(); you are triggering the focus event on all the inputs tags of your html code, and i don't think you want this.

// Variables with global scope.

var i;
var current_fs, next_fs, previous_fs; // Fieldsets.
var left, opacity, scale;             // Fieldset properties which we will animate
var animating;                        // Flag to prevent quick multi-click glitches

$(document).ready(function()
{
    i = 1;

    // Trigger the focus event only in the first input element.

    $('input#id_project_name').focus();

    // Register events listeners.

    clickNext();
    clickPrevious();
    nextOnEnter();
});

// Register a listener for click event on all elements with class ".fs-next".

function clickNext()
{
    $(".fs-next").click(function()
    {
        if (animating)
            return false;

        animating = true;
        current_fs = $(this).parent();
        next_fs = $(this).parent().next();

        // Hide the current fieldset with animation style.

        current_fs.animate(
            {opacity: 0},
            {
                step: function(now, mx) {

                    // As the opacity of current_fs reduces to 0, stored in "now"
                    // 1. Scale current_fs down to 80%.
                    scale = 1 - (1 - now) * 0.2;

                    // 2. Bring next_fs from the right(50%).
                    left = (now * 50) + "%";

                    // 3. Increase opacity of next_fs to 1 as it moves in.
                    opacity = 1 - now;

                    current_fs.css({'transform': 'scale(' + scale + ')'});
                    next_fs.css({'left': left, 'opacity': opacity});
                },
                duration: 800, 
                complete: function() {

                    current_fs.hide();
                    animating = false;

                    // Show the next fieldset.
                    next_fs.show();

                    // Set focus on next input.
                    next_fs.find("input").focus();

                    // Setup classes.
                    $('.dot' + i.toString()).addClass('completed').removeClass('current');
                    i = i + 1;
                    $('.dot' + i.toString()).addClass('current')
                }
            }
        );
    });
}

// Register a trigger of click event on all inputs when "enter key" is pressed.

function nextOnEnter()
{
    $('input').keypress(function(e)
    {
        if (e.which == 13)
            $(this).parent().find('.fs-next').click();
    });
}