0

I'm trying to make a list where the user can select 5 items. Those items are generated through PHP. When the user clicks on 1 item that item needs to be saved in an Javascript array. Once the user selected 5 items, those needs to be saved into an mysql database.

Atm I can select items, but the array remains empty.

My code:

<script type="text/javascript">

        var genrearray = new Array(4);
        var i=1; 

        $(document).ready(function kleurveranderen() {
            $(".keuzeDiv").on("click", function kleurveranderen() {
                if(i<=5){   
                        $(this).toggleClass("green");
                        genrearray[i] = document.getElementById("$Keuzescherm['Genrenaam']").innerHTML;
                        i++;

            }
        else{
                alert("Teveel genres geselecteerd.");
            }

        })
        });</script>

this is standing between script tags but for some reason he isnt showing them.

my php code: 

<?php while($Keuzescherm= $allGenres->fetch_assoc())
{
       echo "<div class='keuzeDiv' id='".$Keuzescherm['Genrenaam'] ."'>" 
              . $Keuzescherm['Genrenaam']."</div>"; 
    }?>

the id of the div is the same as the value.

my css code to indicate that the div is selected

.keuzeDiv{
background-color:#dddddd; 
padding-top:5%;
color: black;
padding-bottom: 10px;
 }
.green{
    background-color:#8eb461; 
    color:white;}

So my question is: How can I fill the array with the php values and save that array to a MySql database?

JJJ
  • 32,902
  • 20
  • 89
  • 102
Gertjan Vanhove
  • 19
  • 4

1 Answers1

0

I think what you should be doing is:

genrearray[i] = $(this).text();

You can't reference PHP variables in Javascript. And the variable you were trying to reference is from the while loop, so its value outside the loop is not very useful.

Barmar
  • 741,623
  • 53
  • 500
  • 612