Home > DeveloperSection > Forums > How to hide previous table rows that were shown based on previous search
marcel ethan
marcel ethan

Total Post:105

Points:735
Posted on    April-09-2013 1:59 AM

 JavaScript JavaScript 
Ratings:


 1 Reply(s)
 788  View(s)
Rate this:
Hi All!

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>";               
    }
?>


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-09-2013 7:40 AM

Hi Marcel!

try as below line of 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.

Don't want to miss updates? Please click the below button!

Follow MindStick