Search code examples
javascriptjquerypreventdefault

How to reset form functionality if previously e.preventDefault() was on it's button?


I have a form which naturally does its thing and above form there are 3 Bootstrap tabs with some text. If a specific tab for Camp is open then instead of form passing data to its page it should redirect user to a contact page. This works, but if user clicked a tab for Camp and then change tab to something else, form doesn't reset it's functionality.

How can I remove e.preventDefault() inside reset_form() and let the form does it's thing?

    var $reservationBtn= $("#js-reservation-btn");

    // Don't send form to it's page, but redirect user to Contact page
    function redirect_form_to_contact_page() {
        $reservationBtn.on('click', function(e) {
             e.preventDefault();
             window.location.href = 'https://www.example.com/contact';
        });
    }

    // Reset form so it works normally
    function reset_form() {
        $reservationBtn.on('click', function(e) {
            return true;
        });
    }

    // Depending on a tab clicked redirect to Contact or reset form
    $("#reservation__list a").click(function() {

        if ($(this).hasClass('js-reservation-tab-btn-camp')) {
            redirect_form_to_contact_page();
        }
        else {
            reset_form();
        }

    });

Solution

  • Try to unbind the click event

    $reservationBtn.unbind('click');