How to hide previous table rows that were shown based on previous search

Question

The idea of the following code is that the user will search based on maintenance operation No, operation type, the member who performs the operation, or the employee whose PC needs maintenance. When the user selects, for example, the operation type, a drop-down menu will show up and then he selects the type. After that a table of maintenance information will show up. For example, the user selects the type Printing. The table will show the following information:

Operation No, Member Name, Employee Name, Maintenance Type

1001, Adem, John, Printing 1003, George, Smith, Printing 1010, William, John, Printing

The problem that I am facing is when the user selects search by operation no, for example, and he selects the operation no is 1001, the rest of the rows (1003 and 1010 that were shown based on the previous search) are still shown up (they must be hidden because they do not match with the search type).

The code is

<script>
function check() {
    var dropdown = document.getElementById("OpType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "OpNo") {
        document.getElementById("operationno").style.display = "block";
        document.getElementById("MainType").style.display = "none";
        document.getElementById("MemName").style.display = "none";
        document.getElementById("EmpName").style.display = "none";
    }
    else if (current_value == "OpTyp") {
        document.getElementById("MainType").style.display = "block";
        document.getElementById("MemName").style.display = "none";
        document.getElementById("EmpName").style.display = "none";
        document.getElementById("operationno").style.display = "none";
    }
    else if (current_value == "OpMem") {
        document.getElementById("MemName").style.display = "block";
        document.getElementById("operationno").style.display = "none";
        document.getElementById("MainType").style.display = "none";
        document.getElementById("EmpName").style.display = "none";

    }
    else if (current_value == "OpEmp"){
        document.getElementById("MemName").style.display = "none";
        document.getElementById("operationno").style.display = "none";
        document.getElementById("MainType").style.display = "none";
        document.getElementById("EmpName").style.display = "block";

    }
    else if (current_value == "blank") {
        document.getElementById("MainType").style.display = "none";
        document.getElementById("MemName").style.display = "none";
        document.getElementById("EmpName").style.display = "none";
        document.getElementById("operationno").style.display = "none";

    }
}
</script>

<form name="f1" action="FollowOperations.php" method="post">
<select id="OpType" onChange="check();">
<option value="blank">Choose</option>
<option value="OpNo">Operation No</option>
<option value="OpTyp">Operation Type</option>
<option value="OpMem">Maintenance Member</option>
<option value="OpEmp">Employee</option>
</select><br>

<input class="tb10" type="text" id="operationno" size="4" style="text-align: center" style="display: none">

<select id="MainType" style="display: none">
<option value="blank">Choose</option>
<option value="printing">Printing</option>
<option value="maintenance">PC Maintenance</option>
<option value="internet">Internet Problem</option>
<option value="software">Software</option>
<option value="email">Email Problem</option>
<option value="usbcd">USB/CD Problem</option>
</select>

<select id="MemName" style="display: none">
<option value="blank">Choose</option>
<option value="john">John</option>
<option value="hen">Hen</option>
</select>

<select id="EmpName" style="display: none">
<option value="blank">Choose</option>
<option value="smith">Smith</option>
<option value="will">William</option>
<option value="Gor">George</option>
</select>

<input type="submit" value="Submit" class="button" /> 
</form>

<?php
    if (isset($_POST['formsubmitted']))
    {

        $operationno = $_POST['ono'];
            echo "<table id='tfhover' class='tftable' border='1' align='center'>";
            echo "<tr align='center'><th></th><th align='center'>Type</th><th>Employee</th><th align='center'>Member</th><th align='center'>Operation No</th></tr>";
                $query_retrieve_maintenance = "Select * from Maintenance where ID = '$operationno'";
                $result_retrieve_maintenance = mysqli_query($dbh, $query_retrieve_maintenance);         
                    while($row1 = mysqli_fetch_array($result_retrieve_maintenance))
                        {
                            echo "<tr>";
                            echo "<td><a href='PastOperationsDet.php?operation_number=".$row1['ID']."' target='_blank'>Show</a></td> ";
                            echo "<td>".$row1['Type']."</td> ";
                            echo "<td>".$row1['MemName']."</td> ";
                            echo "<td>".$row1['EmpName']."</td> ";
                            echo "<td>".$row1['ID']."</td> ";
                        }

        $MainType = $_POST['mt'];
                $query_retrieve_by_type = "Select * from Maintenance where Type = '$MainType'";
                $result_retrieve_by_type = mysqli_query($dbh, $query_retrieve_by_type);
                    while($row1 = mysqli_fetch_array($result_retrieve_by_type))
                        {
                            echo "<tr>";
                            echo "<td><a href='PastOperationsDet.php?operation_number=".$row1['ID']."' target='_blank'>Show</a></td> ";
                            echo "<td>".$row1['Type']."</td> ";
                            echo "<td>".$row1['MemName']."</td> ";
                            echo "<td>".$row1['EmpName']."</td> ";
                            echo "<td>".$row1['ID']."</td> ";
                        }

        $MemName = $_POST['mn'];
                $query_retrieve_by_member = "Select ID from Member where Name = '$MemName'";
                $result_retrieve_by_member = mysqli_query($dbh, $query_retrieve_by_member);
        $membID = mysqli_fetch_row($result_retrieve_by_member);
                $memb_id = $membID[0];
        $query_retrieve_by_membername = "Select * from Maintenance where MemberID = '$memb_id'";
                $result_retrieve_by_membername = mysqli_query($dbh, $query_retrieve_by_membername);
                    while($row1 = mysqli_fetch_array($result_retrieve_by_membername))
                        {
                            echo "<tr>";
                            echo "<td><a href='PastOperationsDet.php?operation_number=".$row1['ID']."' target='_blank'>Show</a></td> ";
                            echo "<td>".$row1['Type']."</td> ";
                            echo "<td>".$memb_id."</td> ";
                            echo "<td>".$row1['EmpName']."</td> ";
                            echo "<td>".$row1['ID']."</td> ";
                        }       

        $EmpName = $_POST['me'];
                $query_retrieve_by_employee = "Select ID from Employee where Name = '$EmpName'";
                $result_retrieve_by_employee = mysqli_query($dbh, $query_retrieve_by_employee);
        $emplID = mysqli_fetch_row($result_retrieve_by_employee);
                $empl_id = $emplID[0];
        $query_retrieve_by_emplid = "Select * from Maintenance where EmployeeID = '$empl_id'";
                $result_retrieve_by_emplid = mysqli_query($dbh, $query_retrieve_by_emplid);
                    while($row1 = mysqli_fetch_array($result_retrieve_by_emplid))
                        {
                            echo "<tr>";
                            echo "<td><a href='PastOperationsDet.php?operation_number=".$row1['ID']."' target='_blank'>Show</a></td> ";
                            echo "<td>".$row1['Type']."</td> ";
                            echo "<td>".$row1['MemName']."</td> ";
                            echo "<td>".$empl_id."</td> ";
                            echo "<td>".$row1['ID']."</td> ";
                        }
            echo "</table>";               
    }
?>

Answer 1

Nass,

I took the liberty to make a fiddle for this case. Take a look at it and ask if you don't understand it.

i hope it helps.

Kind regards, Alex

In this link, http://jsfiddle.net/QthB6/10/, it's set up in a clean way, like;

function blockify () {      // for style.display = "block"

} 

function unblockify () {    // for style.display = "none"

} 

Answer 2

At first try to simplify your code

function check() {
    var dropdown = document.getElementById("OpType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;
    var aIds = ['operationno', 'MainType', 'MemName', 'EmpName'];
    for(var i = aIds.length; i>=0; i-- ) {
        var ob = document.getElementById(aIds[i]);
        if( current_value == aIds[i] ) {
            ob.style.display = "block"
        }
        else  {
            ob.style.display = "none"
        }
    }

    ....

    <select id="OpType" onChange="check();">
    <option value="blank">Choose</option>
    <option value="operationno">Operation No</option>
    <option value="MainType">Operation Type</option>
    <option value="MemName">Maintenance Member</option>
    <option value="EmpName">Employee</option>
    </select>

    ....

Then append "name" atrtribute to your input's and select's field.

And then try to print_r your $_POST array to see it values.