Choose option in select and get the result

I have  an index page where there is a select/option field. It is filled from DB. In a DIV under the select/option I have some cards (bootstrap) they have their own category (kategori). I want them to only show the ones equal to the selected option and it should be filtered instantly no button to send selected option.

index.php
Screenshot
Kim AnovAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan singhWeb developerCommented:
Can you show screen shot to clear your question
Thank you
Mohan Singh
0
Julian HansenCommented:
Give your cards an id equal to the value of the select and give them a class so you can easily identify them.
<div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5" id="ID_OF_OPTION_HERE">
Then
<script>
$(function() {
  $('#kategorier').change(function() {
     // Hide the cards
     $('.card-deck').hide();

     // Create an ID for the selected card
     var selected = '#' + $(this).val();

     // Show the selected card
     $(selected).show();
  });
});</script>

Open in new window

0
Kim AnovAuthor Commented:
Julian look like something I could use. But I still  need a value from the select/option to use in my pdo query.
0
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

mohan singhWeb developerCommented:
Hi@ Kim Anov
 U can use on change function with ajax

This is your main page
 <div class='form-control'> 
<select id="opId" name="opId" onchange="checkOpt">
<option><?php $sql = mysqli_query($conn,"select * from table");?> </option>
</div>
<div class="row" id="displaySection">  </div>


<script type="text/javascript">
    function checkOpt(){
        var opId = document.getElementById("opId").value; 
        $.post("otp.php",{opId:opId},
            function(data){
                $("#displaySection.php").html(data);                
            }); 
    }
   </script>

Open in new window


This is your Ajax page
<?php
if(isset($_POST['opId'])){
$id = $_POST['opId'];
$sql = mysqli_query($conn, "SELECT * FROM table WHERE id='$id');
//then fetch your data what you want

}
?>

Open in new window


//You can also try onchange , onblur ok

Thank You
Mohan Singh
0
Julian HansenCommented:
But I still  need a value from the select/option to use in my pdo query.
This gets you the value (from the above code)
$(this).val();

Open in new window

The change event on the select will provide the "this" reference to the select that was changed.
Calling the jQuery .val() on the $(this) will give you the value of the current selection.
0
Kim AnovAuthor Commented:
Hi Julian have been playing around with ur code but cant it to work. Could u maybe change index.php. Just cant figure it out by myself.
0
Julian HansenCommented:
Can you rather post your rendered page - I don't want to have to go and plug all the endpoints in your script just to get it to render.
0
Kim AnovAuthor Commented:
i will zip my dir and add SQL file đź‘Ť I'm not home right now so will sent it when i gĂĄet back.
0
Julian HansenCommented:
No don't do that - open the page in your browser - do a View Source and past the source here. That way we can see the resulting rendered code. I do not have time to recreate your environment to see what the rendered page looks like - if you give us the rendered page that will be much more useful.
0
Kim AnovAuthor Commented:
<style>
body {
padding-top: 5rem;
background: url('background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#fff;
background-color:#333;
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}

</style>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

 
    
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    
    <title>WannaBeNørd</title>
    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">
        <img src="/wannabenord/assets/brand/wannabenord.png" height="30" class="d-inline-block align-top" alt="">
        WannaBeNørd
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.php">Annoncer <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="opretannonce.php">Opret Annonce</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="opretbruger.php">Opret Bruger</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="brugeradmin.php">Bruger Admin</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="brugerlogin.php">Log Ind</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>


<main role="main" class="container">
  <div class="text-center pb-3">
    <h1>Forside</h1>
    <p class="lead mb-3">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  <div class="mb-5">
    <select class="form-control" id="kategorier">
      <option value=1>FunkoPOP</option><option value=2>Diverse</option><option value=3>Alle</option>    </select>
  </div>
  <div class="row">
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=61"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/15225207985968658685abfd2de6d5ba.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=61">Westworld Bernard Lowe</a></h5><hr>
          <p class="card-text">Your favorite characters from HBO's Westworld get the Pop! Vinyl treatment! This Westworld Pop! Vinyl Figure features Bernard Lowe as an adorable stylized figure. Standing about 3 3/4-inches tall, this Westworld Bernard Lowe Pop! Vinyl Figure is packaged in a window display box.</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">99,00 kr.</h3>
        </div>
      </div>
    </div>
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=62"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/15226873078545495135ac25d4ba650f.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=62">Buster Bluth</a></h5><hr>
          <p class="card-text">ghjghjg ghjghjgh ghjghjg ghjghj</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">45,00 kr.</h3>
        </div>
      </div>
    </div>
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=63"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/152272346911968486915ac2ea8d5f7ca.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=63">NECA The Simpsons 25 Years of the Greatest Guest S</a></h5><hr>
          <p class="card-text">Over the year, The Simpsons has had a ton of celebrities stop by. And while there has been no shortage of toys, memorabilia and other merchandise for the show, most of it has focused on the first family and the recurring characters. The changes with NECA Simpsons 25 of the Greatest Guest Star Figures.</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">120,00 kr.</h3>
        </div>
      </div>
    </div>
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=64"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/15227238417584667805ac2ec01a1ee7.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=64">Despicable Me Minions Tim med Scooter</a></h5><hr>
          <p class="card-text">Diecast metal model with plastic parts, length approx. 7cm (2.8 inch), new in box.
Mondo Motors</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">60,00 kr.</h3>
        </div>
      </div>
    </div>
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=65"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/1522724196590620595ac2ed64a07d8.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=65">Star Wars Rogue One K-2SO HASBRO</a></h5><hr>
          <p class="card-text">Star Wars Rogue One Action figure
3.75" tall
K-2SO
zip line action
Brand new and sealed Disney/Hasbro Figure</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">100,00 kr.</h3>
        </div>
      </div>
    </div>
        <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <a href="annonce.php?vare=66"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/15227245424892047135ac2eebe997ea.png"></a>        <div class="card-body">
          <!--       <h4 class="card-title">sælger</h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=66">Avangers Thor Toilettaske</a></h5><hr>
          <p class="card-text">Licensed Marvel toilettaske</p>
        </div>
        <div class="card-footer bg-dark">
          <h3 class="text-white">150,00 kr.</h3>
        </div>
      </div>
    </div>
      </div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>
$(function() {
  $('#kategorier').change(function() {
     // Hide the cards
     $('.card-deck').hide();

     // Create an ID for the selected card
     var selected = '#' + $(this).val();


     // Show the selected card
     $(selected).show();
  });
});</script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Open in new window

0
Julian HansenCommented:
First question - do the values of your <select> have to be numeric
<select class="form-control" id="kategorier">
  <option value=1>FunkoPOP</option>
  <option value=2>Diverse</option>
  <option value=3>Alle</option>
</select>

Open in new window


Second - you need to add something to your cards to link them to the categories. For instance a class name that is linked to the categories.

Option 1 - if you don't need numeric's as your values and can do this
<select class="form-control" id="kategorier">
  <option>FunkoPOP</option>
  <option>Diverse</option>
  <option>Alle</option>
</select>

Open in new window

Then the values become the same as the display values and you can use something like
class-FunkoPop
class-Diverse
class-Alle
As selectors on your cards

If you have to use numerics then you can use
class-category-1
class-category-2
class-category-3

I will use the first example

<div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5 class-FunkoPOP">

Open in new window


Now you can use this code
<script>
$(function() {
  $('#kategorier').change(function() {
     // Hide the cards
     $('.card-deck').hide();

     // Get the selected value
     var val = $(this).val();

     // If the value is blank then set to card-deck to show all
     val = val ? 'class-' + val : 'card-deck';

     // Show the selected cards
     $('.' + val).show()
  });
});</script>

Open in new window


Where you went wrong
1. Your script above came BEFORE your jQuery include - it must come after
2. You kept my use of '#' (select by ID) instead of using a class
3. You did not add anything to your card <div> so that the code above could select them.

To note
I have made the Alle selection blank - I am assuming this means show All so in the jQuery we check to see if the value is blank and if it is we make the selector card-deck to select all cards.

If it is not blank it is set to FunkoPOP or Diverse - we prepend class- to the value and then use that as the selector.

As long as each of the cards has either class-FunkoPOP OR class-Diverse in the class attribute the code above will work.

Another Note
Your <style> is outside of the document definition - it needs to go in the head.

I have put a sample based on the above here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kim AnovAuthor Commented:
I can see the idea. But cant get it to work with DB.

<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<?php require('includes/config.php');?>

<main role="main" class="container">
  <div class="text-center pb-3">
    <h1>Forside</h1>
    <p class="lead mb-3">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  <div class="mb-5">
    <select class="form-control" id="kategorier">
      <?php
      $sql= "SELECT * FROM kategori";
      $stmt = $db->prepare($sql);
      $stmt->execute();
      $result = $stmt->fetchAll();
      foreach($result as $row) {
      echo '<option value='.$row['kategoriNavn'].'>'.$row['kategoriNavn'].'</option>';
      } ?>
      <option value="" >All</option>
    </select>
  </div>
  <div class="row">
    <?php $sql= "SELECT * FROM vare";
    $stmt = $db->prepare($sql);
    $stmt->execute();
    $result = $stmt->fetchAll();
    foreach($result as $row) {
    $vareid = $row["vareID"];
    $varenavn = $row["vareNavn"];
    $varebeskrivelse = $row["vareBeskrivelse"];
    $varepris = $row["varePris"];
    $varetype = $row["vareType"];
    $salgstype = "sælger";
    if ($varetype != "saelge") {
    $salgstype = "køber";
    }
    ?>
    <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5">
      <div class="card bg-light">
        <?php
        $sql= "SELECT billedeNavn FROM billeder WHERE billedeVareID = '$vareid' LIMIT 1";
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $result = $stmt->fetchAll();
        foreach($result as $row) {
        echo '<a href="annonce.php?vare=' . $vareid . '"><img style="height: 200px;display: block;margin-left: auto;
        margin-right: auto;" class="p-3 img-fluid" src="testimg/'.$row['billedeNavn'].'"></a>';
        }
        ?>
        <div class="card-body">
          <!--       <h4 class="card-title"><?php echo $salgstype;?></h4>
          -->      <h5><a class="card-link" href="annonce.php?vare=<?php echo $vareid;?>"><?php echo $varenavn;?> </a><span class="badge badge-danger">Solgt</span></h5><hr>
          <p class="card-text"><?php echo $varebeskrivelse;?></p>
        </div>
        <div class="card-footer stripes bg-dark">
          <h3  class="text-white"><?php echo str_replace('.', ',', $varepris);?> kr.</h3>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
$('#kategorier').change(function() {
// Hide the cards
$('.card-deck').hide();
// Get the selected value
var val = $(this).val();
// If the value is blank then set to card-deck to show all
val = val ? 'class-' + val : 'card-deck';
// Show the selected cards
$('.' + val).show()
});
});</script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Open in new window

0
Kim AnovAuthor Commented:
It dont change to class- something
0
Julian HansenCommented:
You need to change line 38 to something like this

 <div class="mx-auto card-deck col-lg-4 col-sm-6 col-xs-12 mb-5 class-<?php echo $row['kategoriNavn'];">

Open in new window

NOTE: I have no idea what field in your vare table refers to the categori - so you might need to change the above to match your situation.

The idea here is you need to add a class to each card that can be linked to value in the katagori <select>
0
Kim AnovAuthor Commented:
THX now it works
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.