0

could you please help me with the following:

At the moment i am stuck with a while loop using PHP and looping through a database query which give 5 results and in that while loop i created for each result of the loop a window with html/css which shows products and inside that window it contains also + and - buttons to add or substract products and for that i used a JavaScript function.

So what i get with that while loop is this:

<?php

  while ($row = mysql_fetch_assoc($resultaat)) {
            echo "
                <div class='row tussenruimte'>
                </div>
                <div class='flex-container product-container'>
                    <div class='flex-item product-c-1'>
                        <img src='../imgs/img5.jpg' id='img5-bezorgen'></img>
                    </div>
                    <div class='flex-item product-c-2'>
                        <div class='row titel-product-row'>
                            <div class='col-md-8'> 
                                " 
                                . $row['naam'] . 

                                "       
                            </div>
                        </div>
                        <div class='row omschrijving-product-row'>
                            <div class='col-md-12'>
                                " 
                                . $row['omschrijving'] . 

                                "
                            </div>
                        </div>
                    </div>
                    <div class='flex-item product-c-3'>
                        <div class='flex-container p-c-3-c'>
                            <div class='flex-item p-c-3-i'>
                                <form action='' method='GET'>
                                    <div class='row product-toevoegen-rij'>
                                        <div class='col-md-4 product-aantal-invullen'>
                                            <div id='aantal'>0</div>
                                        </div>
                                        <div class='col-md-4 product-aantal-toevoegen'>
                                            <button class='product-aantal-toevoegen-knop-css' onclick='increase(); return false;'>+</button>
                                        </div>
                                        <div class='col-md-4 product-aantal-aftrekken'>
                                            <button class='product-aantal-aftrekken-knop-css' onclick='decrease(); return false;'>-</button>
                                        </div>
                                    </div>
                                    <div class='row product-toevoegen-knop'>
                                        <button class='toevoegen-knop-css' onclick=''>toevoegen aan winkelwagen</button>
                                    </div>
                                    <div class='row product-toevoegen-prijs'>
                                        <div class='col-md-12 prijs-col'>
                                            " 
                                            . $row['prijs'] . 

                                            "
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            ";
        }
?>
// And here is the JavaScript function:

<script>
        var i=0;

        function increase()
        {
            i++;
            document.getElementById('aantal').innerHTML= +i;
        }

        function decrease()
        {
            i--;
            document.getElementById('aantal').innerHTML= +i;
        }
    </script>

But the problem is that the JavaScript function doesn't respond with an unique product in the while loop.

If i have 5 products which are shown. Then the JavaScript function works only for 1 product.

Could someone help me out with how i could figure this out? I tried making the JavaScript function unique but i don't know how i should.

Thanks in advance!

Oussama
  • 425
  • 1
  • 5
  • 7
  • 1
    You need to learn the difference between server side and client side programming and the order of their execution. – John Conde Jan 16 '17 at 18:46
  • Yeah, i am still practising for a project here. And indeed i am trying since i am new to OOP and MVC. It will take time, thanks for the advice! – Oussama Jan 16 '17 at 18:50
  • Possible duplicate of [What is the difference between client-side and server-side programming?](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – gre_gor Jan 16 '17 at 18:51
  • gre_gor, i will have a look there. – Oussama Jan 16 '17 at 18:53
  • Ah okey, so i have to redesign this whole functionality. I wasn't aware that i couldn't use "client sided code" in "server sided code" and visa versa. – Oussama Jan 16 '17 at 19:02
  • 2
    Every time you use [the `mysql_`](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) database extension in new code **[a Kitten is strangled somewhere in the world](http://2.bp.blogspot.com/-zCT6jizimfI/UjJ5UTb_BeI/AAAAAAAACgg/AS6XCd6aNdg/s1600/luna_getting_strangled.jpg)** it is deprecated and has been for years and is gone for ever in PHP7. If you are just learning PHP, spend your energies learning the `PDO` or `mysqli` database extensions and prepared statements. [Start here](http://php.net/manual/en/book.pdo.php) – RiggsFolly Jan 16 '17 at 19:08
  • 1
    You're using getElementById('aantal'). Only one of each id may exists. Use unique ids. – Saa Jan 16 '17 at 20:04
  • Thanks Sander Backus, you solved the logical problem. I upvoted your answer. I have to make them unique some how, and of course learn how to use server sided and client sided code. – Oussama Jan 17 '17 at 08:10
  • RiggsFolly, yeah thanks for the advice. I will try mysqli instead. – Oussama Jan 17 '17 at 08:12

1 Answers1

1

I want to solve with a different example.

$query = "SELECT * FROM books";
$result = mysql_query($query);
$dServer = array();

while($row = mysql_fetch_assoc($result)){
    $dServer[] = $row['model'];
}    

?>
<script type="text/javascript">
    var a = <?php echo json_encode($dServer); ?>;
</script>

You can then print using the array

Arda Kazancı
  • 8,341
  • 4
  • 28
  • 50