How to pass a PHP variable that is inside a "a" tag to be used inside a Modal?

Question

How to pass a PHP variable that is inside a "a" tag to be used inside a Modal?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Hello, I'm new to PHP and I came across a problem: How to pass a PHP variable ($ id) that is inside a "a" tag into a Modal?

Here is the code:

<?php
require '../SisCellCenter/autoloader.php';
use VisaoJR\Cellcenter\ClassPHP\Products;
$products = new Products();
?>

<div class="content">
    <div class="new-arrivals-w3agile">
        <div class="container">
            <!-- <h2 class="tittle">Destaques</h2> -->
            <?php
                $featuredProducts = $products->viewFeatureds();
                $rand_keys = array_rand($featuredProducts, sizeOf($featuredProducts)); //escolhe produtos em destaque aleatoriamente
                $max=0;
                if(sizeOf($featuredProducts)>9){$max = 9;} else{$max = sizeOf($featuredProducts);} //exibe no máximo 9 produtos em destaque
                for ($i=0; $i < $max; $i++) {
                ?>

                <div class="arrivals-grids">
                    <div class="col-md-3 arrival-grid simpleCart_shelfItem">
                        <div class="grid-arr">
                            <div  class="grid-arrival">
                                <figure>
                                    <a class="new-gri" id="featured" data-toggle="modal" data-target="#featuredModal" value="<?php $id = $i; ?>">
                                        <div class="grid-img">
                                            <?php echo '<img  src="images/Produtos/'.$featuredProducts[$rand_keys[$i]]->image.'">'; ?>
                                        </div>
                                        <div class="grid-img">
                                            <?php echo '<img  src="images/Produtos/'.$featuredProducts[$rand_keys[$i]]->image.'">'; ?>
                                        </div>
                                    </a>
                                </figure>
                            </div>
                            <div class="ribben">
                                <p>NEW</p>
                            </div>
                            <div class="ribben1">
                                <p>SALE</p>
                            </div>
                            <div class="women">
                                <h6><center><?php echo $featuredProducts[$rand_keys[$i]]->name; ?></center></h6>
                                <span class="size"><?php echo $featuredProducts[$rand_keys[$i]]->brand; ?></span>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="clearfix"></div> -->
                </div>
            <?php }?>
        </div>
    </div>
</div>
<!--content-->


<!--Modal produtos em destaque-->
<div class="modal fade" id="featuredModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-info">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="news-gr">
                    <div class="col-md-5 new-grid1">
                        <?php echo '<img  src="images/Produtos/'.$featuredProducts[$id]->image.'" class="img-responsive" alt="">'; ?>
                    </div>
                    <div class="col-md-7 new-grid">
                        <h5><?php echo $featuredProducts[$id]->name; ?></h5>
                        <h6><?php echo $featuredProducts[$id]->brand; ?></h6>
                        <span><?php echo $featuredProducts[$id]->description; ?></span>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

From now on, I thank anyone who can help me!

php modal

asked by anonymous 19.04.2017 / 23:36

3 answers

Android: How to make a POST request to get an image The publications are getting on the last page in the PHP MYSQLI

score 1 · Answer 1

How to pass values from PHP to Javascript and vice versa?

What can not be ignored in the match of Javascript with PHP is that the two are running on different ends. The Javascript scripts with their variables are in the browser, loaded along with HTML , and the PHP scripts will have executed their tasks on the other side of WEB , on the server.

The only way of communication between them is the (html, javascript…) texts that pass through the HTTP protocol. It seems like a paradox since you will find PHP , HTML and Javascript in the same index.php file (for example). However, as stated earlier, each, PHP and Javascript acts in a different environment. For example:

Let's assume the file teste.php with the following content:

<html>
   <body>
  <?php echo “Um Hello World !”; ?>
     </body>
</html>
<script type=”text/javascript”>
  alert(“Outro Hello World!”);
</script>

The part that is colored gray, is static purely text in the form of HTML tags. The line in red corresponds to a program in PHP to write "Hello World!", Which will be interpreted by PHP on the server, and only the result will be delivered to the Browser as follows:

<html>
  <body>
   Um Hello World!
  </body>
</html>
<script type=”text/javascript”>
  alert(“Outro Hello World!”);
</script>

Finally, the colored line in blue also does not change between server and browser. However the browser will interpret it as a command to display a small window with the phrase “Hello World” and an OK button.

So far you can see where everything is happening.

Taking advantage of this apparent meeting, you can construct the text of a text Javascript there on the server by filling in the value of a Javascript variable using PHP:

<html>
  <body>
  <?php echo “Um Hello World!”;
  $nome_individuo = “Cicrano de Mattos Pinto”;
  ?>
  </body>
</html>
<script type=”text/javascript”>
  var nome_individuo_1 = “Fulano”;
  var nome_individuo_2 = “<?php echo $nome_individuo; ?>“;
  alert(nome_individuo_1 + ”  ” + nome_individuo_2);
</script>

As expected, the browser will receive the following:

<html>
  <body>
   Um Hello World!
  </body>
</html>
<script type=”text/javascript”>
  var nome_individuo_1 = “Fulano”;
  var nome_individuo_2 = “Cicrano de Mattos Pinto”;
  alert(nome_individuo_1 + ”  ” + nome_individuo_2);
</script>

And to transfer the value of a PHP variable into a “.js” file?

So ... it is not possible to <? echo… ?> within a “.js”, file because usually this only works inside a .php file. But it is perfectly possible to <? echo… ?> within a “.php” file of the (index.php por exemplo…) page. Note that this page will also load “.js”. To do this, simply create global variables ( Javascript ), which can be called Array , which can be called "environment variables". They will allow the transit of information from the environment HTML+PHP to the scope of the Javascript file.

<script>
//para não criar muitas variáveis dispersas, é interessante criar um array de variáveis 
var VARS_AMBIENTE = new Array();
//em nosso exemplo vamos preencher a variável de ambiente “caminho_servidor”
// a qual terá seu conteúdo fornecido por um echo PHP
VARS_AMBIENTE[‘caminho_servidor’] = <? echo $caminho_server; ?>;
</script>

Reinforcing that when the HTML + PHP page loads into the browser, the above code will be seen as:

<script>
var VARS_AMBIENTE = new Array();
VARS_AMBIENTE[‘caminho_servidor’] = “algum valor fornecido pelo echo do PHP lá no servidor…”;
</script>

Because PHP will already have done its work on the server when the page loads in the browser. And then the script code that is in the middle of HTML will come from the server with the previously populated variable.

Continuing the page index.php… now just load the script that should have some reference to VARS_AMBIENTE[‘caminho_servidor’] to receive the value contained in this variable:

<script src=“meuscript.js”></script>

Ready! Any code contained within meuscript.js that references VARS_AMBIENTE[‘caminho_servidor’] will have access to the server path.

And the reverse path?

Now from javascript to PHP, as each one will be interpreted at a different end of the web (Javascript - client / PHP - server), the only way to send data continues to be through network traffic. At this time a "magic" tag can help:

<form …>

<input type=“hidden” id=“dados” name=“dados_enviar” value=“” />

</form>

<script>

//aqui a input hidden de id=”dados” recebe um valor dinâmicamente
//via código Javascript:

//cria um objeto de referência à tag input hidden
var objetoDados = document.getElementById(“dados”);
//altera o atributo value desta tag
objetoDados.value = “dados que vão para o servidor”;
</script>

At the moment this data is "submitted", it can be acquired on the server through a script PHP that captures it via post for example:

<?

echo $_POST[ ‘dados_enviar‘];

?>

Tip: If you copy code to test, rewrite the double quotes in the text editor that you are using.

Because WORDPRESS puts a more aesthetic quotation marks, but they are not valid characters in Javascript and PHP .

Source: https://ahaprogramando.wordpress.com/

score 0 · Answer 2

To redeem the values you used in a loop earlier, you should save them to a dataset named array . =)

Then it would look like this:

<?php 

    ... (codigo anterior) ...

    //declare o array antes do for
    $dados = array();

    $featuredProducts = $products->viewFeatureds();
    $rand_keys = array_rand($featuredProducts, sizeOf($featuredProducts)); //escolhe produtos em destaque aleatoriamente
    $max=0;
    if(sizeOf($featuredProducts)>9){$max = 9;} else{$max = sizeOf($featuredProducts);} //exibe no máximo 9 produtos em destaque
    for ($i=0; $i < $max; $i++) {

    $id = $i;
    $dados[] = $featuredProducts[$rand_keys[$i]]; // salva a variável ou então o id
    // $dados[] = $id; // aqui você usa o id se quiser

    ... (restante) ...

?>

Then just create another loop and rescue that data. So:

 <?php
for($i = 0; $i < count($dados); $i++){

?>
<!--Modal produtos em destaque-->
<div class="modal fade" id="featuredModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-info">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="news-gr">
                    <div class="col-md-5 new-grid1">
                        <?php echo '<img  src="images/Produtos/'.$dados[$i]->image.'" class="img-responsive" alt="">'; ?>
                    </div>
                    <div class="col-md-7 new-grid">
                        <h5><?php echo $dados[$i]->name; ?></h5>
                        <h6><?php echo $dados[$i]->brand; ?></h6>
                        <span><?php echo $dados[$i]->description; ?></span>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<?php } ?>

I did not do the tests, so I might give something wrong. But that's the logic.

score 0 · Answer 3

I was able to solve in a very grotesque way using Java Script, follow the modified code:

If someone knows a way to compress this code I thank you and also make clicking on the image as if you were clicking the input, because the way it is is displaying the value = <?php echo $i;?> .

Thanks to @otaciojb for the explanation that helped a lot in understanding the Client / Server issue and the other colleagues who volunteered to help.

(OBs: It's all in the same file!)

<?php
require '../SisCellCenter/autoloader.php';
use VisaoJR\Cellcenter\ClassPHP\Products;
$products = new Products();
$featuredProducts = $products->viewFeatureds();
$dados = array();
?>

<div class="content">
    <div class="new-arrivals-w3agile">
        <div class="container">
            <h2 class="tittle">Destaques</h2>
            <?php
                $rand_keys = array_rand($featuredProducts, sizeOf($featuredProducts)); //escolhe produtos em destaque aleatoriamente
                $max=0;
                if(sizeOf($featuredProducts)>9){$max = 9;} else{$max = sizeOf($featuredProducts);} //exibe no máximo 9 produtos em destaque
                for ($i=0; $i < $max; $i++) {
                // foreach ($featuredProducts as $fpValue):  //ainda não funciona pois os casos são estabelecidos manualmente no <script>!
            ?>
                <div class="arrivals-grids">
                    <div class="col-md-3 arrival-grid simpleCart_shelfItem">
                        <div class="grid-arr">
                            <div  class="grid-arrival">
                                <figure>
                                    <a href="#" class="new-gri" id="featured" data-toggle="modal" data-target="#featuredModal">
                                        <div class="grid-img">
                                            <?php
                                                $dados[] = $i; // salva o id para uso no Java Script
                                                echo '<img  src="images/Produtos/'.$featuredProducts[$rand_keys[$i]]->image.'">';
                                            ?>
                                        </div>
                                        <div class="grid-img">
                                            <?php echo '<img  src="images/Produtos/'.$featuredProducts[$rand_keys[$i]]->image.'">';?>
                                        </div>
                                        <input type="submit" value="<?php echo $i;?>">
                                    </a>
                                </figure>
                            </div>
                            <div class="ribben">
                                <p>NEW</p>
                            </div>
                            <div class="ribben1">
                                <p>SALE</p>
                            </div>
                            <div class="women">
                                <h6><center><?php echo $featuredProducts[$rand_keys[$i]]->name; ?></center></h6>
                                <span class="size"><?php echo $featuredProducts[$rand_keys[$i]]->brand; ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php }
            // endforeach;
            ?>
        </div>
    </div>
</div>







<div class="modal fade" id="featuredModal" tabindex="-1" role="dialog">';?>
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-info">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div id='leo' class="news-gr">
                    <script type="text/javascript">
                    $(function(){
                        $("input").click(function(){
                            var valor = $(this).val();
                            if(valor == "<?php echo $rand_keys[0]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[0]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[0]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[0]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[0]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[0]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[1]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[1]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[1]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[1]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[1]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[1]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[2]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[2]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[2]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[2]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[2]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[2]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[3]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[3]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[3]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[3]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[3]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[3]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[4]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[4]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[4]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[4]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[4]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[4]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[5]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[5]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[5]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[5]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[5]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[5]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[6]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[6]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[6]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[6]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[6]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[6]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[7]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[7]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[7]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[7]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[7]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[7]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else if(valor == "<?php echo $rand_keys[8]?>"){
                                featuredClicked="<div class='col-md-5 new-grid1'>"+
                                        "<img  src='images/Produtos/<?php echo $featuredProducts[$rand_keys[8]]->image; ?>' class='img-responsive' alt=''>"+
                                        "</div>"+
                                        "<div class='col-md-7 new-grid'>"+
                                        "<h5>"+"<?php echo $featuredProducts[$rand_keys[8]]->name; ?>"+"</h5>"+
                                        "<h6>"+"<?php echo $featuredProducts[$rand_keys[8]]->brand; ?>"+"</h6>"+
                                        "<span>"+"<?php echo $featuredProducts[$rand_keys[8]]->description; ?>"+"</span>"+
                                        "<div class='color-quality'>"+
                                        "<div class='color-quality-left'>"+
                                        "<h6>Cores:</h6>"+
                                        "olors_idcolors do banco de dados= "+"<?php echo $featuredProducts[$rand_keys[8]]->colors_idcolors; ?>"+
                                        "<ul>"+
                                        "<li><a href='#'><span></span>Red</a></li>"+
                                        "<li><a href='#' class='brown'><span></span>Yellow</a></li>"+
                                        "<li><a href='#' class='purple'><span></span>Purple</a></li>"+
                                        "<li><a href='#' class='gray'><span></span>Violet</a></li>"+
                                        "</ul>"+
                                        "</div>"+
                                        "<div class='clearfix'> </div>"+
                                        "</div>"+
                                        "</div>";
                                document.getElementById('leo').innerHTML=featuredClicked;
                            }
                            else {
                                alert("Botão Salvar e Sair");
                            }
                        });

                    });
                    </script>

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>