Fetch data from mysql by checking radio button - php

Question

i have few models of products and when i click on each model to show me his variants, like on image from below
Here is what i made in html :
<div class="owl-carousel owl-theme no-pb slide-arrow-2" data-
dots="false" data-nav="true" data-items="4" data-lg-items="3"
data-md-items="2" data-sm-items="2" data-margin="30" data-
autoplay="false">
<?php
$qua = "SELECT * FROM produse WHERE categorie = '$id' ORDER BY pozitie";
$qla = mysqli_query($conn, $qua);
while($rova = mysqli_fetch_assoc($qla)){?>
<?php
$id_paletar = $rova['id'];
$sql2=mysqli_query($conn,"SELECT * FROM pret_produse WHERE produs_id='$id_paletar'");
$pret2=mysqli_fetch_array($sql2);
?>
<div class="item">
<div class="product-item">
<div class="product-img">
<img class="img-fluid" src="cms/produse/<?=$rova['poza'];?>" alt="">
<div class="product-overlay">
<ul class="list-unstyled">
</ul>
</div>
</div>
<div class="product-btn ifix">
<div class="btn btn-theme btn-block btn-new" ><span style="font-size: 15px;"><?=$rova['titlu'];?></span>
<div>
<label class="containere">
<input type="radio" name="produse" id="paletar_pret" class="palt" value="<?=$rova['id'];?>">
<p class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<?php }?>
</div>
Here is my jquery:
$(document).ready(function(){
$('.palt').change(function() {
if(this.checked) {
var check= $(this).val();
alert(check);
$.ajax({
url: 'cere_cotatie.php',
type: 'POST',
data: {check:check},
success: function(data){
$('.fetch').append(data);
}
});
}
});
And here is my php file which i use on ajax to call:
<?php
if($_POST)
{
include('config.php');
echo $check = $_POST['check'];
$s = "SELECT * FROM variante WHERE id_var='$check'";
$q = mysqli_query($conn, $s);
while ($r = mysqli_fetch_assoc($q)) {?>
<div class="item" style="width:220px;">
<div class="product-item">
<div class="product-img">
<img class="img-fluid" src="cms/variante/<?=$r['poza'];?>" alt="">
<div class="product-overlay">
<ul class="list-unstyled">
</ul>
</div>
</div>
<div class="product-btn ifix">
<div class="btn btn-theme btn-block btn-new" ><span style="font-size: 15px;"> <?=$r['denumire'];?></span>
<div>
<label class="containere">
<input type="checkbox">
<p class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<?php }?>
<?php }
?>
My problem is like this if i check first box to display me variants of what i checked but my code is doing this way, if i check first box is loading data and after that if i check another box results from first box need to dissapear and to be only what i check.
EDIT: in that print screen you can see the problem.

Answer 1

I think you should add below code
$('.palt').change(function(e) {
e.preventDefault();
});
and remove alert(check);
Hope it work for you.