enviar valor de un enlace html a javascript

[davidsbok]

Buenas. Me gustaría saber como obtengo el bajor de un enlace y como pasarlo desde javascript a php para guardarlo en la base de datos. Es para hacer una votacion con estrellas:

<a href="#" data-value="1" onclick="muestravalor();" title="Votar con 1 estrellas">★</a>
<a href="#" data-value="2" onclick="muestravalor();" title="Votar con 2 estrellas">★</a>
<a href="#" data-value="3" onclick="muestravalor();" title="Votar con 3 estrellas">★</a>
<a href="#" data-value="4" onclick="muestravalor();" title="Votar con 4 estrellas">★</a>
<a href="#" data-value="5" onclick="muestravalor();" title="Votar con 5 estrellas">★</a>

al clicar quiero obtener el valor de data-value en javascript para operar con el luego en php y almacenar el dato.

He probado con esto pero nada.

<script>
function muestravalor(){
vara2=document.getElementById("data-vaule").value;
alert (vara2);
}

Muchas gracias de antemano por la ayuda.

[Alexis88]

A la función muestravalor(), pásale como parámetro el propio enlace a través de la palabra reservada this, de esta forma, en la función obtendrías el valor del pseudo-atributo data-value utilizando el método getAttribute.

Código Javascript:

function muestravalor (enlace){
    var valor = enlace.getAttribute("data-value");
    alert (valor); //Muestra el valor del atributo 'data-value' del enlace clickeado
}
 

Saludos

[caricatos]

Hola:

Ya que enlazas, porqué no usas el mismo enlace... usar href="#", creo que es absurdo, porque es un enlace al tope de la página, que dudo que sea tu intención... además no es accesible, y cuando pienses en SEO, sabrás que los enlaces son muy importantes...

Tal vez debas primero pensar en descartar javascript para tener una solución accesible, y luego acomodar las funciones que necesites (no es difícil)...

Saludos

[davidsbok]

Es que el enlace lo utilizo para un sistema de votacion por estrellas con css y al colocarse encima cambia el color y al hacer clic manda el valor 1,2,3,4 o 5. no quiero que enlace con nada ya que es una página que muestra una ruta en bici y se le da un votación. Es que he tenido problemas para que el sistema de votacion funcione con internet explorer mas antiguos con jquery y este es el que menos problemas me ha dado ya que va bien en todos los navegadores.

Voy a probar a ver que tal

[caricatos]

Hola:

Iniciado por davidsbok

...al colocarse encima cambia el color y al hacer clic manda el valor 1,2,3,4 o 5. no quiero que enlace con nada...

:hover... color o background-color... se cambia al colocarse encima... sin necesidad de un enlace...

onclick... se ejecuta una función para lo que sea... sin necesidad de un enlace...

"no quiero que enlace con nada..." sin necesidad de un enlace

Lo que no dices... quiero que aparezca la mano de "zona caliente"... estilo: cursor: pointer;... sin necesidad de un enlace...

Investiga mi comentario sobre accesibilidad y SEO...

Saludos

[davidsbok]

Ajam entiendo. Cambio el enlace con algo parecido como <spam> ya que hover y onclic funciona tambien. Ok entiendo luego pruebo a la noche que me tengo que ir a trabajar. Este es el rollo que solo tengo una hora al mediodia y ya luego a la noche. Gracias por la idea. Por cierto yo tambien soy de torroles, casualidades jj.

[davidsbok]

Lo cambié de la siguiente forma pero ahora no me aparece ni el alert. Tiene que haber un fallo


<script>
function muestravalor(enlace){
vara2=document.getAtributte("data-value").value;
alert (vara2);
}
</script>


<div class="ec-stars-wrapper">
<span data-value="1" name="enlace" onclick="muestravalor();" title="Votar con 1 estrellas">★</span>
<span data-value="2" name="enlace" onclick="muestravalor();" title="Votar con 2 estrellas">★</span>
<span data-value="3" name="enlace" onclick="muestravalor();" title="Votar con 3 estrellas">★</span>
<span data-value="4" name="enlace" onclick="muestravalor();" title="Votar con 4 estrellas">★</span>
<span data-value="5" name="enlace" onclick="muestravalor();" title="Votar con 5 estrellas">★</span>
</div>

[Alexis88]

Parece que ni leíste esta parte:

Iniciado por Alexis88

A la función muestravalor(), pásale como parámetro el propio enlace a través de la palabra reservada this, ...

Y ojo, un atributo no puede tener otro atributo, de modo que ese value está de más, al igual que el document del principio. Fíjate bien en el ejemplo que te mostré.

[davidsbok]

Lo consegui como me dices Alexis88 lo único que se me cambiaron las estrellas por interrogaciones no se por que. De todos modos voy a ver si consigo que aparezcan las estrellas y lo cambio para que no sean enlaces como dice caracatos. Gracias por guiarme.

<script>
function muestravalor(enlace){
var valor = enlace.getAttribute("data-value");
alert (valor);
}
</script>

<div class="ec-stars-wrapper">
<a href="#" data-value="1" onclick="muestravalor(this);" title="Votar con 1 estrellas">★</a>
<a href="#" data-value="2" onclick="muestravalor(this);" title="Votar con 2 estrellas">★</a>
<a href="#" data-value="3" onclick="muestravalor(this);" title="Votar con 3 estrellas">★</a>
<a href="#" data-value="4" onclick="muestravalor(this);" title="Votar con 4 estrellas">★</a>
<a href="#" data-value="5" onclick="muestravalor(this);" title="Votar con 5 estrellas">★</a>
</div>

[davidsbok]

Por ahora lo dejo así. Ahora a ver como ejecuto php desde javascritp...

<script>
function muestravalor(enlace){
var valor = enlace.getAttribute("data-value");
alert (valor);
}
</script>

<div class="ec-stars-wrapper">
<span data-value="1" onclick="muestravalor(this);" title="Votar con 1 estrellas">★</span>
<span data-value="2" onclick="muestravalor(this);" title="Votar con 2 estrellas">★</span>
<span data-value="3" onclick="muestravalor(this);" title="Votar con 3 estrellas">★</span>
<span data-value="4" onclick="muestravalor(this);" title="Votar con 4 estrellas">★</span>
<span data-value="5" onclick="muestravalor(this);" title="Votar con 5 estrellas">★</span>
</div>

[Alexis88]

No necesitas ejecutar un lenguaje dentro otro, basta con que en la función muestravalor, envíes de forma asíncrona (Ajax) al valor capturado hacia un archivo PHP para que lo procese, de ese modo, no recarga la página, no mezclas lenguajes y consigues tu objetivo.

Saludos