asked on

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

mohan singh

Can you show screen shot to clear your question
Thank you
Mohan Singh

Julian Hansen

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

Kim Anov

ASKER

Julian look like something I could use. But I still need a value from the select/option to use in my pdo query.

mohan singh

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

Julian Hansen

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.

Kim Anov

ASKER

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.

Julian Hansen

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.

Kim Anov

ASKER

i will zip my dir and add SQL file 👍 I'm not home right now so will sent it when i gået back.

Julian Hansen

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.

Kim Anov

ASKER

<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

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kim Anov

ASKER

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

Kim Anov

ASKER

It dont change to class- something

Julian Hansen

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>

Kim Anov

ASKER

THX now it works

Julian Hansen

You are welcome.