Tengo una imagen en la que se puede hacer clic con tres botones que revelan más información al hacer clic (usando JavaScript, basado en el código de blex de Imagen interactiva (mapa) ). Ahora quiero guardar en mi base de datos si el usuario ha hecho clic en los botones o no, con una variable para cada botón.

He agregado variables ocultas a mi HTML, que son visibles en mi base de datos.

 <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">

Sin embargo, siempre son 0. Creo que es porque mi código no conecta las variables ocultas con los objetos de JavaScript. ¿Cómo puedo hacer eso?

 <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>