0

Earlier, I was testing an online form on a project I am working on and noticed I couldn't actually type anything in any of the form fields. I narrowed it down to a specific script. And I think it's this bit right here in the code causing the problem since when I remove it, I can type again.

$(document).on('keypress', handleEvent);  

But for the life of me I have no idea why it's happening and I'm not sure how to go about fixing it. Any help in pointing out what's wrong and how to fix this would be appreciated.

    jQuery(document).ready(function($) {
        function handleEvent(e){
            var id = null;          
            var fade_out;
            var fade_in;
        
            if (e.type === 'click'){
                id = $(this).attr("id");
            }else{
                id = e.which;
            }
            
            switch (id){
                case 13:
                if ($('#click_1').is(':visible')){
                    fade_out = '#start_1';
                    fade_in  = '#step_0';
                }
                break;              
                ..etc..
                default:
                break;
            }   
            $(fade_out).fadeTo( 'fast', 0 );
            $(fade_in).delay( 800 )..fadeTo( 'slow', 1 );
            e.preventDefault();
        }
    $('#ts_container').on('click', 'button, a', handleEvent);
    $(document).on('keypress', handleEvent);  
    });

Update

I figured out a way to fix it. But, still no idea why it was happening.

Replaced:

$(document).on('keypress', handleEvent); 

With:

if ($(document).keydown(function(e){            
    if ($('#service_form').is(':hidden')){
        $(document).on('keyup', handleEvent);  
    }
}));

1 Answer 1

0

Even after revising the code the first time around I then came to realize it wasn't just blocking the form fills but everything else unassigned. After initially fixing it temporarily I then found not only were keypresses being blocked but so were unassigned buttons and anchors. I needed a way to turn that bit of code on and off. This is where I came across a solution provided by BenG from 2015 here: JQuery: Disable click event.

With his code and a few modifications to the existing code, the below code resolved the problems with both unassigned clicks and keyboard entries being denied.

Changed this:

         //any unassigned clicks / buttons would not work with this code.
         $('#ts_container').on('click', 'button, a', handleEvent);

         // any unassigned keypress events would not work with this code.
         $(document).on('keypress', handleEvent);  

To This:

jQuery(document).ready(function($) {

    $.fn.disableClick = function (disable){
        this.each(function() {
            if(disable){
                if(this.onclick)
                $(this).data('onclick', this.onclick).removeAttr('onclick');
                if($._data(this, 'events') && $._data(this, 'events').click)
                $(this).data('click', $.extend(true, {}, $._data(this, 'events').click)).off('click');
            }
            else{
                if($(this).data('onclick'))
                this.onclick = $(this).data('onclick');
                if($(this).data('click'))
                for(var i in $(this).data('click'))
                $(this).on('click', $(this).data('click')[i].handler);
            }
        });
        return this;
    };

    function handleEvent(e){
        var id = null;          
        var fade_out;
        var fade_in;
    
        if (e.type === 'click'){
            id = $(this).attr("id");
        }else{
            id = e.which;
        }
        
        switch (id){
            case 13:
            if ($('#click_1').is(':visible')){
                fade_out = '#start_1';
                fade_in  = '#step_0';
            }
            break;              
            ..etc..
            default:
            break;
        }   

        if($('#service_form').is(':visible')){
            $('#ts_container').disableClick(false);
            document.removeEventListener('keydown', handleEvent);
        }           
        e.preventDefault();         
    }
    
    $('#ts_container').on('click', 'button, a', handleEvent);
    document.addEventListener('keydown', handleEvent);
        
    function resetListeners(){
        $('#ts_container').disableClick(true);
        document.addEventListener('keydown', handleEvent);
    }
    
    $('#wpforms-submit-531').on('click', resetListeners);
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.