how to filter input filed based on previous input

Viewed 61

hi guys i want to fiter data based on user input. user have to select the company in first input and then game in second tab, so i am trying to show them only games from selected company (which user select in first tab). here is my code if anyone can help me plzzz



<div class="form-group">
<label for="company">Company Name</label>
<select  name="company" autocomplete="off">
<?php $sql = "SELECT * from clients having manager like '%$uname%'" ;
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{   ?>                                            


<option value="<?php  echo htmlentities($result->company);?>"><?php  echo htmlentities($result->company);?></option>

<?php 


}} ?>
</select>
</div>

<div class="form-group">
<label for="game">Game Name</label>
<select  name="game" autocomplete="off">
<?php $sql = "SELECT * from clientgames  having company like '%..........????......%'" ;
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{   ?>                                            


<option value="<?php echo htmlentities($result->gamename);?>"><?php echo htmlentities($result->gamename);?></option>

<?php }} ?>
</select>
</div>``` 
1 Answers

You can do it simply using javascript why are you using php? I have added some code below refer it

document.getElementById("company").oninput = function(){

    var selected_company = document.getElementById("company").value;
    if(selected_company == "company - 1"){
        document.getElementById("game").innerHTML = 
        '<option>game xyz</option> <option>game xyz2</option>'
    }
    else if(selected_company == "company - 2"){
        document.getElementById("game").innerHTML = 
        '<option>game abc</option> <option>game abc2</option>'
    }
    else if(selected_company == "company - 3"){
        document.getElementById("game").innerHTML = 
        '<option>game pqr</option> <option>game pqr2</option>'
    }
    else{
        document.getElementById("game").innerHTML = ''
    }
}
<select name="company" id="company">
    <option> --select company-- </option>
    <option>company - 1</option>
    <option>company - 2</option>
    <option>company - 3</option>
</select>
<select name="game" id="game">
    <!-- Keep it empty for now it will be filled by javascript-->
</select>

Related