Toggling between displaying various div blocks based on the select input

Question

I am trying to toggle between displaying two div blocks based on the select input using js. Below is the source code :

<html>
<head>
</head>

<style>
.wrapper {
    left: 100px;
    position: relative;
    width: 400px;
    }

   .form-wrapper {
     position: relative;
     width: 200px;
   }

   .label {
  font-size: 1.1em;
  }

  select {
     font-size: .9em;
}
</style>

<body onload="categorySelector();">

<script type="text/javascript">

function init() {
    document.getElementById("add").style.display = "block";
    document.getElementById("search").style.display = "none";   
}

function categorySelector() {
    var val = document.getElementById("operation").value;
    if(val == "addOp") {
        document.getElementById("add").style.display = "block";
        document.getElementById("search").style.display = "none";
    } else if(val == "searchOp") {
        alert(val);
        document.getElementById("add").style.display = "none";
        document.getElementById("search").style.display = "block";
    }
}

</script>

<div class="wrapper">
        <div>
            <label> Select the operation:</label>
            <select id="operation" name="operationSelection" onchange="categorySelector()">
                <option value="addOp"> Addition </option>
                <option value="searchOp"> Search </option>      
            </select>
        </div>                      
        <div id="add" class="form-wrapper">
                <form name="addForm" action="udm_2(working).jsp" method="POST">
                        <div class="label">Select the Category:</div>
                        <div>
                            <input type="radio" name="addCategory" value="wD" checked="checked">
                            <label for="wD">WhiteListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="wE" checked="checked">
                            <label for="wE">WhiteListed Email</label>   
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bD" checked="checked">
                            <label for="bD">BlackListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bE" checked="checked">
                            <label for="bE">BlackListed Email</label>   
                        <div>   
                        <input type="submit"/>
                </form>
        </div>

        <div id="search" class="form-wrapper">
                <form name="addForm" action="udm_2(working).jsp" method="POST">
                        <div class="label">Select the Category:</div>
                        <div>
                            <input type="radio" name="addCategory" value="wD" checked="checked">
                            <label for="wD">WhiteListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="wE" checked="checked">
                            <label for="wE">WhiteListed Email</label>   
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bD" checked="checked">
                            <label for="bD">BlackListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bE" checked="checked">
                            <label for="bE">BlackListed Email</label>   
                        <div>   
                        <input type="submit"/>
                </form>
        </div>
</div>
</body>
</html>

The problem I face is, on the page load the first div block gets displayed but when I toggle to other select option, the respective div block for the option doesn't get displayed. So can someone please explain why does it not happen?

not sure what you want, but it's obviously that your functions seem to run just 1 time, they don't handle any event or have some chance to run again, looks like this is what you want http://jsfiddle.net/UfSkS/ — King King, Jun 03 '14 at 15:53

score 0 · Answer 1 · edited May 23 '17 at 12:11

Two things:

The onchange event is fired with an element's value attribute changes. Since you're not changing the "select" element's value, the event will never be fired. Source. The solution here might help you with this.
It looks like you're trying to get the value of the select element rather than the selected option.

Try this:

function categorySelector() {
    var i = document.getElementById("operation").selectedIndex;
    var val = document.getElementsByTagName("option")[i].value;

    alert("val = "+val);

    if (val == "addOp") {
        document.getElementById("add").style.display = "block";
        document.getElementById("search").style.display = "none";
    } else if (val == "searchOp") {
        alert(val);
        document.getElementById("add").style.display = "none";
        document.getElementById("search").style.display = "block";
    }
}

Hope this helps. :)

score 0 · Answer 2 · answered Jun 03 '14 at 16:00

Inside your forms you're not closing divs - every time you're opening new one instead.
Example from your HTML:

<div>
    <input type="radio" name="addCategory" value="wD" checked="checked">
    <label for="wD">WhiteListed Domain</label>  
<div>

Just change the latter from <div> to </div>.

This problem occurs multiple times in your code. This way the second form is inside the first one. Hiding the first form makes all contained elements (including the second form) invisible.

Toggling between displaying various div blocks based on the select input

2 Answers2