javascript – show and hide html element-ThrowExceptions

Exception or error:

I have a problem may be very simple to you so please don’t get angry 😀
I’m junior developer and I’m little bad at javascript.
I have a form like this :

IMAGE :

IMAGE

When I choose “count view“, the input with lable “view” show up, and when I continue choose “count click”, the input with lable “click” show up too.

Javascript code :

    $(document).ready(function(){
    $('body').on("click","#count_option", function(e){
        if($("#count_option").val() === $("#count_view").val()) {
            $("#view_form").show();
        }
        if($("#count_option").val() === $("#count_click").val()) {
            $("#click_form").show();
        }
    });
});

I want when i choose an option, just one input show up. Please help me.

Thanks in advance.

How to solve:

You have to hide other form when you want to see the another one and vice-versa.
Check the code below, change few things and you’ll be good to go.

$(document).ready(function(){
    $('body').on("click","#count_option", function(e){
        if($("#count_option").val() === $("#count_view").val()) {
            $("#view_form").show();
            $("#click_form").hide(); // hide other form
        }
        if($("#count_option").val() === $("#count_click").val()) {
            $("#click_form").show();
            $("#view_form").hide(); // hide other form
        }
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *