How to show a textbox or select/option in the page once user selects an option from the list without clicking the submit button?

Question

I want to show another dropdown list beneath the current one once the user chooses Rank or Department. After choosing from the new list, they user can submit the form.

Similarly, if the user chooses any other option (except LastName), a textbox will appear that needs to be filled in before they can click the submit button.

<form action="viewEmployeeHTML.php" method="post">
    <div class="outer-div">
        <div class="inner-div">
            <br><br><br>
            <h2>Search By:</h2>
            <select name="selectionToView" class="SelectBox">
                <option value="Select">-- Select --</option>
                <option value="ID">ID</option>
                <option value="FirstName">First Name</option>
                <option value="MiddleName">Middle Name</option>
                <option value="LastName">Last Name</option>
                <option value="Email">Email</option>
                <option value="Phone">Phone</option>
                <option value="IP_Phone">IP Phone</option>
                <option value="OfficeNumber">Office Number</option>
                <option value="CoordinatorName">Coordinator Name</option>
                <option value="Rank">Rank</option>
                <option value="Department">Department</option>
                <option value="JoiningDate"> Joining Date</option>
                <option value="Committee_AND_Unit">Committee/Unit</option>
            </select><br><br><br>
        </div>
    </div>
    <br><br><br>
    <center><input type="submit" value="VIEW" name="view"></center>
</form>

I tried this code but it didn't work for me:

<form action="viewEmployeeHTML.php" method="post">
    <div class="outer-div" >
        <div class="inner-div">
            <br><br><br>
            <h2>Search By:</h2>
            <select name="selectionToView" class="SelectBox" onchange="OnSelectionChange()">
                <option value="Select">-- Select --</option>
                <option value="ID">ID</option>
                <option value="FirstName">First Name</option>
                <option value="MiddleName">Middle Name</option>
                <option value="LastName">Last Name</option>
                <option value="Email">Email</option>
                <option value="Phone">Phone</option>
                <option value="IP_Phone">IP Phone</option>
                <option value="OfficeNumber">Office Number</option>
                <option value="CoordinatorName">Coordinator Name</option>
                <option value="Rank">Rank</option>
                <option value="Department">Department</option>
                <option value="JoiningDate"> Joining Date</option>
                <option value="Committee_AND_Unit">Committee/Unit</option>
            </select>
            <br><br><br>
        </div>
    </div>
    <br><br><br>
    <center><input type="submit" value="VIEW" name="view"></center>
</form>
<script>
    function OnSelectionChange(){
</script>
<?php
    $selectionToView=$_POST['selectionToView']
    if(isset(selectionToView) == "ID"){
?>
<script>document.write("<center><input type="submit" value="VIEW" name="view"></center>");</script>
    <?php
    }
    ?>
<script>
    }
</script>

Answer 1

I've sligthly changed the HTML and wrote JavaScript for it with a little help of CSS.

 function OnSelectionChange(value) { document.getElementById("submit-button").disabled = true; if ( value == "Rank" ) { document.getElementById("rank-select").style.display = "block"; document.getElementById("department-select").style.display = "none"; document.getElementById("text").style.display = "none"; } else if ( value == "Department" ) { document.getElementById("rank-select").style.display = "none"; document.getElementById("department-select").style.display = "block"; document.getElementById("text").style.display = "none"; } else if ( value == "Select" ) { document.getElementById("rank-select").style.display = "none"; document.getElementById("department-select").style.display = "none"; document.getElementById("text").style.display = "none"; } else { document.getElementById("rank-select").style.display = "none"; document.getElementById("department-select").style.display = "none"; document.getElementById("text").style.display = "block"; } } function onSecondSelectChange(value) { if ( value != "Select" ) { document.getElementById("submit-button").disabled = false; } else { document.getElementById("submit-button").disabled = true; } } function onTextChange(value) { if ( value != "" ) { document.getElementById("submit-button").disabled = false; } else { document.getElementById("submit-button").disabled = true; } } 

 #rank-select, #department-select, #text { display: none; } 

 <form> <div class="outer-div" > <div class="inner-div"> <h2>Search By:</h2> <select name="selectionToView" class="SelectBox" onchange="OnSelectionChange(this.options[this.selectedIndex].value)"> <option value="Select">-- Select --</option> <option value="ID">ID</option> <option value="FirstName">First Name</option> <option value="MiddleName">Middle Name</option> <option value="LastName">Last Name</option> <option value="Email">Email</option> <option value="Phone">Phone</option> <option value="IP_Phone">IP Phone</option> <option value="OfficeNumber">Office Number</option> <option value="CoordinatorName">Coordinator Name</option> <option value="Rank">Rank</option> <option value="Department">Department</option> <option value="JoiningDate"> Joining Date</option> <option value="Committee_AND_Unit">Committee/Unit</option> </select> <select name="rank-select" id="rank-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)"> <option value="Select">-- Select --</option> <option value="1">1</option> <option value="2">2</option> </select> <select name="department-select" id="department-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)"> <option value="Select">-- Select --</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="text" name="text" id="text" onchange="onTextChange(this.value)"> </div> </div> <input type="submit" value="VIEW" name="view" id="submit-button" disabled="disabled"> </form> 

Answer 2

If i understood you correctly, you want another select list or textarea to appear under the current select list when the user selects certain option. Select list when he picks Rand or Department, and textarea in all other cases. What i would do is make those extra elements you need(another select list and textarea) and put them on display:none. Then with onchange event handler use a function that would check which option is selected and display/hide whatever you need. You would need an extra select list for each option in the first select list, but in case you are populationg option from a database, then you could use ajax to dinamicaly populate single select list depending on what the user picked. Hope this helps.

onchange would be like:

onchange='displayList(this)'

function would look something like this:

function displayList(selectObject){

        var option = selectObject.value;

        if(option == 'Department' || option == 'Rank'){
            document.getElementById('select').style.display='inline';
            document.getElementById('text').style.display='none';
        }
        else{
            document.getElementById('select').style.display='none';
            document.getElementById('text').style.display='inline';
        }

        if(option == 'Select'){
            document.getElementById('select').style.display='none';
            document.getElementById('text').style.display='none';
        }

    }