How to create an event for href="javascript:void(0);" onclick="?() ;">

Question

Accessing the address http://www.lccinformatica.com.br/, can verify that I can bring and view the two categories registered in the table "CATEGORY" in the BD (Image below),

but I would like that when selected one of the categories, were shown only the products that are related to the selected category, registered in the table "PRODUCTS" in the BD (Image below).

To direct them to the products for the desired category, I tried using a PHP command (Image below),

to bring the result I used (Image Below)

thinking that would solve (Pure illusion and pretension on my part)... Rsrsrs...

But as you can see, when I click on either of the two categories, brings me all the products registered in the table "PRODUCTS" in the comic.

Doing a Web search, I discovered that maybe the solution lies in creating an event that I can use with javascript:void(0). But I am totally Javascript layperson, and I need the help of friends to create such an event.

For this I am posting below the codes used so far:

Page listing the categories:

    <!-- Listando os Categorias -->
<?php
$nome_cat = $_POST['nome_cat'];
$img_cat = $_POST['img_cat'];
$query_categoria = mysql_query("SELECT * FROM categoria");
while($res = mysql_fetch_array($query_categoria)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
    <a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_cate/<?php echo $res['img_cat']; ?>" width="100" title="<?php echo $res['nome_cat']; ?>" />
    </a>
    <div style="background:#2f2140; margin-left:-300px; width:880px;z-index:999;border-radius:25px;" class="single-cat">
        <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
        <div style="margin-left:357px;width:50px;" class="cat-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
        </div>
<!-- Listando os Produtos por Categoria -->
<?php include "pag_lista_produtos.php"; ?>                  
    </div>
</div>
<?php
}
?>

Page listing Products for Selected Categories:

    <!-- Listando os produtos referente a Categorias selecionada -->
<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$mome_cat = $_POST['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){
?>

    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
            <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>

        <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
                <div class="song-sides">
                    <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                </div>
            </div>

            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

            <h1> <?php echo $res['titulo']; ?> </h1>
            <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

Javascript referring to the pages posted here.

jQuery(".cat-link").click(function(){
    jQuery(this).parent().find(".single-cat").fadeIn();
});

jQuery(".song-link").click(function(){
    jQuery(this).parent().find(".single-song").fadeIn();
    jQuery(".single-song .entry").jScrollPane();
});

I await good tips and solutions to my problem, and already thanking the attention of all.

Answer 1

You don’t need Javascript to do this, your mistake is trying to use JS where you don’t need it. This should work (assuming your file listing the products is called produtos.php):

<a class="cat-link" href="produtos.php?nome_cat=<?php echo $res['nome_cat']; ?>">

However, there are some other problems with your code.

1. Relationship between tables using the category name instead of the code. The correct one would be to have the category code in the product table, and to use a JOIN in the query to get both the product data and the name of the selected category. See this question for details on how the joins work.

2. You are using a lagged driver to access the database, the mysql_*. The recommended is to use mysqli or PDO. See here and here for more details.

3. Using mysqli or PDO, you can use Prepared statements to avoid a vulnerability (SQL Injection) present in your current code. Read the contents of this link for details. Basically, it is not recommended to interpolate in your query data coming from the user, as you are doing in ... WHERE nome_cat = '$nome_cat'.

Answer 2

With the help of our friend @Givanildo R. de Oliveira, we were able to solve the problem and bring only the products related to the selected category.

Down with the working code:

<?php include "conexao.php"; ?>

<div id="produtos" class="sections full-width-wrapper bg_4">
    <div class="centered-wrapper">

        <div class="section-header">
            <?php include 'menu_pags.php';?>            
        </div>

<div id="produtos-content">

    <!-- Listando os Categorias -->
    <?php
    $nome_cat = $_POST['nome_cat'];
    $img_cat = $_POST['img_cat'];
    $query_categoria = mysql_query("SELECT * FROM categoria");
    while($res = mysql_fetch_array($query_categoria)){
    ?>
    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
        <a class="cat-link" href="?nome_cat=<?php echo $res['nome_cat']; ?>#produtos" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);"
            src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
            title="<?php echo $res['nome_cat']; ?>" />
        </a>
        <div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px; <?php echo $res['nome_cat']==$_GET['nome_cat'] ? 'display:block;' : ''; ?>" class="single-cat">
            <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
            <div style="margin-left:357px;width:50px;" class="cat-links">
                <a class="close-btn" href="javascript:;" title="Voltar">
                    <img src="img/fechar.jpg" />
                </a>
            </div>

<!-- Listando os produtos -->
<?php
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){

$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>

    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
            <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>

        <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
                <div class="song-sides">
                    <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                </div>
            </div>

            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

            <h1> <?php echo $res['titulo']; ?> </h1>
            <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

        </div>
    </div>
    <?php
    }
    ?>
</div>

</div></div></div>

I hope I can help other users with the same problem.