vendredi 7 septembre 2018

Checkbox filter for pdo table

im trying to create a checkbox filter which hides all unchecked rows in a table. this is a buisness contact table and every contact has a priority checkbox, if which is checked and you hit the filter it hides all non prio contacts.

Heres my code so far:

The filter button:

<ul id="filters">
<li>
    <input type="checkbox" class="inputprio" id="filter-prio" />
    <label for="filter-prio">Sofortkontakt</label>
</li>
<li>
    <input type="checkbox" class="inputnorm" id="filter-norm" />
    <label for="filter-norm">Normalkontakt</label>
</li>

The Table:

<?php while($dsk=$stmk->fetch(PDO::FETCH_ASSOC)) : ?>

   <tr>
       <form method="post" action="kontakte.php">
     <td class="box">
        <input name="prio" class="outprio" type="checkbox" <?= $dsk['Sofortkunde'] ? "checked": ""; ?>>
     </td>
    <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Termin']); ?></p>
       <input name="termin" class="edit-input" type="date" value="<?= htmlspecialchars($dsk['Termin']); ?>" style="display:none" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Name']); ?></p>
       <input name="name" class="edit-input" value="<?= htmlspecialchars($dsk['Name']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Vorname']); ?></p>
       <input name="vorname" class="edit-input" value="<?= htmlspecialchars($dsk['Vorname']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Geburtsdatum']); ?></p>
       <input name="geburtsdatum" class="edit-input" type="date" value="<?= htmlspecialchars($dsk['Geburtsdatum']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Beruf']); ?></p>
       <input name="beruf" class="edit-input" value="<?= htmlspecialchars($dsk['Beruf']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Telefon']); ?></p>
       <input name="telefon" class="edit-input" type="tel" value="<?= htmlspecialchars($dsk['Telefon']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
       <p class="label-input"><?= htmlspecialchars($dsk['Info']); ?></p>
       <input name="info" class="edit-input" value="<?= htmlspecialchars($dsk['Info']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
        <p class="label-input"><?= htmlspecialchars($dsk['Anrufe']); ?></p>
        <input name="anrufe" class="edit-input" type="number" value="<?= htmlspecialchars($dsk['Anrufe']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td class="box" style="font-size:14px;">
         <p class="label-input"><?= htmlspecialchars($dsk['Art']); ?></p>
         <input name="art" class="edit-input" value="<?= htmlspecialchars($dsk['Art']); ?>" style="display:none; padding: 0;" required>
     </td>
     <td>
         <button  class="btn btn-danger" name="update" value="speichern" style="padding: 0;" type="submit">Speichern</button>
     </td>
         <input name="hidden" value="<?= htmlspecialchars($dsk['ID']); ?>" type="hidden">

</form>

The jquery scipt:

<script>//show only prio
$(function(){
$(document).on('click', '.inputprio', function(){

  for (!$(this).prop('checked')) {

    var $output = $('.outprio').find('checked');
    if (!$('.outprio:checked')) {
    $('.box').hide();  
    }

    else {
    $('.box').show();
    }
  }
});
});</script>

Right now, nothing is really happening if you click the filter. i had it so it would hide everythign, but i just want it to hide all the non-checked contacts if you select prio contacts and all the checked contacts if you select norm contacts.

im not really that comfortable with jquery yet so any help is appreciated. thanks! johannes




Aucun commentaire:

Enregistrer un commentaire