Thursday, 23 October 2025

Switch Case with Enum in JavaScript

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great 

article. In this article I explained how to use Switch Case with Enum in JavaScript.

Join our Channel  on Whtsapp and Telagram for All Updates                                    

Code for HTML Page

On The HTML page I will place the element SELECT – For displaying names of countries.

The HTML SELECT element (DropDownList) has been assigned with a JavaScript onchange event 

handler.

<select onchange="OnCountriesChange(this)">

    <option value="0">Please select</option>

    <option value="1">India</option>

    <option value="2">UAE </option>

    <option value="3">USA</option>

</select>

Creating and using Enums in JavaScript

Implementation: Inside the OnCountriesChange JavaScript function, an Array will be created. Array of objects with Key Value Pairs created which will be simulated as Enum in JavaScript. Then, a SWITCH statement will be executed and each case i.e. countries will be  verified using CASE and appropriate message will be displayed using JavaScript Alert Message Box.

<script type="text/javascript">

    function OnCountriesChange(d) {

        var colors = { "India": 1, "UAE": 2, "USA": 3 };

        switch (parseInt(d.value)) {

            case colors.Red:

                alert("India");

                break;

            case colors.Green:

                alert("UAE");

                break;

            case colors.Blue:

                alert("USA");

                break;

        }

    }

</script>

Here I am giving complete code for HTML page with JavaScript functions. You need to copy and paste the code in your HTML page for enjoying the code.

 

<head>

    <title></title>

    <style type="text/css">

        body { font-family: Arial; font-size: 10pt; }

    </style>

    <script type="text/javascript">

        function OncountriesChange(d) {

            var countries = { "India": 1, "UAE": 2, "USA": 3 };

            switch (parseInt(d.value)) {

                case countries.India:

                    alert("India");

                    break;

                case countries.UAE:

                    alert("UAE");

                    break;

                case countries.USA:

                    alert("USA");

                    break;

            }

        }

    </script>

</head>

<body>

    <form>

        <select onchange="OncountriesChangeChange(this)">

            <option value="0">select</option>

            <option value="1">India</option>

            <option value="2">UAE</option>

            <option value="3">USA</option>

        </select>

    </form>

</body>

</html>

 Conclusion: In above code, I have been explained that how to use Switch Case with Enum in JavaScript. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

Regards

Programming HUB

 

Wednesday, 15 October 2025

Show Hide TextBox on check uncheck CheckBox using JavaScript and jQuery

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained how to display or show and hide or invisible HTML DIV with TextBox when CheckBox will be checked and unchecked or selected and unselected by using JavaScript as well as jQuery. When user will click on the CheckBox based on whether it is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be show or hide.

Join our Channel  on Whtsapp and Telagram for All Updates                                         

Display Hide DIV with TextBox on CheckBox checked unchecked using JavaScript

On the HTML page I will place two controls and a div, first control will be CheckBox with the id named chk_question and an HTML DIV with the id named div_question and inside this div I will place a TextBox with the id named txt_question. OnClick event handler of the CheckBox I will assign JavaScript function named display_hide_div. When user will click on the CheckBox, the display_hide_div JavaScript function will be executed. In this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be show or hide.

 

<script type="text/javascript">

    function display_hide_div (chkPassport) {

        var divquestion = document.getElementById("div_question");

        divquestion.style.display = chkquestion.checked ? "block" : "none";

    }

</script>

<label for="chkquestion">

    <input type="checkbox" id="chk_question" onclick=" display_hide_div (this)" />

    Have you any questions?

</label>

<hr />

<div id="div_question" style="display:none">

    Question:

    <input type="text" id="txt_question" />

</div> 

You can copy and paste the whole code on your HTML page with JavaScript that I mentioned below to enjoy the execution of the program.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        body

        {

            font-family: Arial;

            font-size: 10pt;

        }

    </style>

</head>

<body>

    <script type="text/javascript">

        function display_hide_div(chk_question) {

            var dvquestion = document.getElementById("div_question");

            dvquestion.style.display = chk_question.checked ? "block" : "none";

        }

    </script>

    <label for="chk_question">

        <input type="checkbox" id="chk_question" onclick="display_hide_div(this)" />

        Do you have any Question?

    </label>

    <hr />

    <div id="div_question" style="display: none">

        Question:

        <input type="text" id="txtPassportNumber" />

    </div>

</body>

</html>

Show Hide DIV with TextBox when CheckBox is checked unchecked using jQuery

On the HTML page I will place two controls and a div, first control will be CheckBox with the id named chk_question and an HTML DIV with the id named div_question and inside this div I will place a TextBox with the id named txt_question. Here I also inherited the jQuery file <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script> The CheckBox has been assigned a jQuery OnClick event handler. When user will be clicked on CheckBox, based on whether CheckBox is checked (selected) or unchecked (unselected), the HTML DIV with TextBox is shown or hidden.

<script type="text/javascript">

    $(function () {

        $("#chk_question").click(function () {

            if ($(this).is(":checked")) {

                $("#div_question").show();

             }else {

                $("# div_question").hide();

            }

        });

    });

</script>

<label for="chkquestion">

    <input type="checkbox" id="chk_question" />

    Have you any questions?

</label>

<hr />

<div id="div_question" style="display:none">

    Question:

    <input type="text" id="txt_question" />

</div> 

You can copy and paste the whole code on your HTML page with jQuery that I mentioned below to enjoy the execution of the program.

<body>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#chk_question").click(function () {

                if ($(this).is(":checked")) {

                    $("#div_question").show();

                } else {

                    $("#div_question").hide();

                }

            });

        });

    </script>

    <label for="chk_question">

        <input type="checkbox" id="chk_question" />

        Do you have any Question?

    </label>

    <hr />

    <div id="div_question" style="display: none">

        Question:

        <input type="text" id="txt_question" />

    </div>

</body>

</html>

Conclusion: In above code, I explained how to display or show and hide or invisible HTML DIV with TextBox when CheckBox will be checked and unchecked or selected and unselected by using JavaScript as well as jQuery. Bye and take care of you Developers. We will come back again shortly with the new article.

Regards

Programming Hub