I have a clickable image with three buttons that reveal further information on click (using JavaScript, based on blex's code from Interactive image (map)). Now I want to save to my database whether the user has clicked on the buttons or not, with one variable for each button.

I have added hidden variables to my HTML, which are visible in my database.

<input type="hidden" name="sea_info" id="v_64">
<input type="hidden" name="forest_info" id="v_65">
<input type="hidden" name="mountain_info" id="v_66">

However, they are always 0. I think it is because my code does not connect the hidden variables with the JavaScript objects. How can I do that?

<script>

var myData = {
    "1": {
        "title": "sea"
        "description": "Some information."
    },
    "2": {
        "title": "forest"
        "description": "Some information."
    },
    "3": {
        "title": "mountains",
        "description": "Some information."
    }
};

var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
  $('#v_64').val($(this).index() + 1);
  $('#v_65').val($(this).index() + 1);
  $('#v_66').val($(this).index() + 1);
}

bubbleClose.addEventListener('click', closeBubble, false);

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<p>' + content.description + '</p>';
  bubble.className = 'shown';
}


function closeBubble() {
  bubble.className = '';
}

imageMapResize();

</script>