Enviar valor de checkbox por url mediante link

axelb · #1 (**permalink**) 31/12/2014, 09:10

buenas, en principio feliz año nuevo a todos! :)

Vamos al grano... de este mismo foro, he obtenido el siguiente codigo:

Código HTML:

<html><head><script>
function enlace() {
      <!-- "frm" == name del formulario; "fotos" == name de los radiobuttons -->
      var radio= document.frm.fotos;
      for (var i=0; i<radio.length; ++i) {
            if (radio[i].checked) {
                  var pasar= radio[i].value; break;
            }
      }
<!-- "tu_pagina.php" == página que quieres abrir -->
document.location.href= 'tu_pagina.php?valor='+pasar;
<!-- usa window.open si quieres... -->
}
</script></head><body>
<form name="frm">
<input type="radio" name="fotos" value="Si">Si
<input type="radio" name="fotos" value="No" checked>No
</form>
<a href="javascript:enlace()">Enlace</a>
</body></html>

¿Que hace? Bueno, al darle click en el Enlace, llama a una funcion js, y este verifica que opcion del radio se ha seleccionado y la envia por la url junto al link.

Ahora bien, necesito algo parecido, pero utilizando checkbox. Lo que necesito es que al darle en el link, junto con el mismo se envíen por url los values de los check que han sido seleccionados.

Alguien podría ayudarme por favor??

Desde ya muchas gracias!!

caricatos · #2 (**permalink**) 31/12/2014, 09:14

Hola:

¿Por qué quieres usar enlaces fabricados con javascript, cuando el comportamiento lógico del formulario hace lo que necesitas sin usar javascript, o sea, de forma accesible...?

Saludos

axelb · #3 (**permalink**) 31/12/2014, 09:24

tengo entendido que con un enlace no puedo enviar los valores de los checkbox seleccionados, como si fuese un boton submit, es por eso que encontré esa solución, si hay otras estoy dispuesto a cambiar!

Lo que necesito es que luego de seleccionar varios checkbox de un listado, pueda enviar sus respectivos values por distintos enlaces (anular y confirmar serian mis enlaces), y luego recuperarlos, claro...

Alexis88 · #4 (**permalink**) 31/12/2014, 09:32

Cita:

Iniciado por axelb

Lo que necesito es que luego de seleccionar varios checkbox de un listado, pueda enviar sus respectivos values por distintos enlaces

¿Para qué? Es decir, puedes enviar toda la información mediante un formulario, además, ten en cuenta que —aunque sean pocos— hay usuarios que desactivan JavaScript de su navegador, por lo que tu función no funcionaría con ellos. Particularmente, me parece innecesaria y poco práctica la manera que pretendes enviar la información, ya que enviándola mediante un formulario, te evitas hacer todo esto y funcionará con o sin JavaScript en el navegador.

Saludos

axelb · #5 (**permalink**) 31/12/2014, 09:36

El uso de js no es un problema y necesito que sean link...

caricatos · #6 (**permalink**) 31/12/2014, 09:38

Hola:

Para empezar, te recomiendo que revises un pequeño tutorial que hice sobre formularios: El abc de los formularios.

Los radios y los checkboxes funcionan igual, salvo que pueden enviarse varios valores con éstos últimos (para recibirlos con php, los nombres deben terminar con un juego de corchetes -ver tuto-)...

Después de revisar el tuto, pregúntanos las dudas...

Saludos

caricatos · #7 (**permalink**) 31/12/2014, 09:40

Hola otra vez:

Cita:

Iniciado por axelb

El uso de js no es un problema y necesito que sean link...

Un botón submit, con ciertos estilos, pueden parecerse a los enlaces

Eso de "necesito"... es muy fastidioso...

Saludos

Alexis88 · #8 (**permalink**) 31/12/2014, 09:46

Cita:

Iniciado por caricatos

Un botón submit, con ciertos estilos, pueden parecerse a los enlaces

Es exactamente lo que le iba a decir. Olvidé editar mi respuesta.

axelb · #9 (**permalink**) 31/12/2014, 10:14

El problema no está en los formularios, tengo varios y funcionan sin problema, pero para este caso necesito que sea así (tengo un jefe), y no se como hacerlo con el js.

He leído tu tutorial, y no dice nada de enviar datos de un formulario a través de la url, o por lo menos no lo encontré! :/

Aclaro también que es para un sistema web, en una pequeña intranet...

Alexis88 · #10 (**permalink**) 31/12/2014, 10:35

Bueno, si de todos modos quieres o tienes que hacerlo así, puedes recorrer el listado de checkbox y verificar uno por uno los que estén marcados, que es lo que veo que haces, sin embargo, en lugar de terminar el bucle al haber encontrado un checkbox marcado, lo que debes de hacer es formar una query string con los nombres de los checkbox marcados y sus valores, de modo que los vas concatenando y al final lo adjuntado a la URI.

Código Javascript:

Ver originalfor (var i = 0, l = radio.length, query = []; i < l; i++){
    if (radio[i].checked){
        query.push(radio[i].name + "=" + radio[i].value);
    }
}
 
location.href = "tu_pagina.php?" + query.join("&");

Saludos

axelb · #11 (**permalink**) 31/12/2014, 10:59

He probado así, pero no me funciona...

que esta mal??

Código HTML:

Ver original<html><head><script>
function enlace2() {
    var radio= document.frm.b;
    for (var i = 0, l = radio.length, query = []; i < l; i++){
    if (radio[i].checked){
        query.push(radio[i].name + "=" + radio[i].value);
    }
}
 
location.href = "check_modificar.php?" + query.join("&");
}
</script></head><body>
<form name="frm">
<input type="checkbox" name="b[]" value="Si">Si
<input type="checkbox" name="b[]" value="No" checked>No
</form>
<a href="javascript:enlace2()">Modificar</a>
</body></html>

:/

Alexis88 · #12 (**permalink**) 31/12/2014, 11:58

¿Cuál es el resultado que obtienes? Por otro lado, si solo hay dos opciones de ese tipo (sí/no), deberías de usar un radio button, no un checkbox.

Saludos

axelb · #13 (**permalink**) 31/12/2014, 14:29

lo de si/no esta así porque así era el ejemplo que encontré, yo lo estoy probando así y cuando logre hacerlos funcionar lo implemento en donde realmente lo necesito que son muuuchas mas opciones, ya que, como mencione antes, los enlaces van a ser anular y confirmar.

El resultado que obtengo es nada, hago click en el enlace y nada...

Alexis88 · #14 (**permalink**) 31/12/2014, 16:00

Haz esto y fíjate qué se muestra en la consola (en Chrome, pulsa F12 y selecciona 'Console').

Código Javascript:

Ver originalfunction enlace2() {
    var radio= document.frm.b;
    for (var i = 0, l = radio.length, query = []; i < l; i++){
        if (radio[i].checked){
            query.push(radio[i].name + "=" + radio[i].value);
        }
    }
 
    console.log(radio, query, query.join("&"));
 
    location.href = "check_modificar.php?" + query.join("&");
}

Saludos

axelb · #15 (**permalink**) 31/12/2014, 16:51

Me dice:

Uncaught TypeError: Cannot read property 'length' of undefined

a que se debe?

Alexis88 · #16 (**permalink**) 31/12/2014, 18:07

A que document.frm.b no existe. Mejor tómalos así:

Código Javascript:

Ver originalvar radio = document.querySelectorAll("[type=checkbox]");

Saludos

axelb · #17 (**permalink**) 31/12/2014, 18:27

Muy bien, vamos avanzando, me envia la variable asi si selecciono solo la opcion "NO":

check_modificar.php?b[]=No

Y si selecciono ambas opciones, me envia asi...

check_modificar.php?b[]=Si&b[]=No

y no logro imprimir el contenido...

Alexis88 · #18 (**permalink**) 31/12/2014, 18:45

Es por el nombre. Mejor quita los corchetes y concatena el valor del contador del bucle más 1:

Código Javascript:

Ver originalfunction enlace2() {
    var radio= document.frm.b;
    for (var i = 0, l = radio.length, query = []; i < l; i++){
        if (radio[i].checked){
            query.push(radio[i].name.replace("[]", "") + (i + 1) + "=" + radio[i].value);
        }
    }
 
    location.href = "check_modificar.php?" + query.join("&");
}

Así, la query string quedaría así: "b1=Si&b2=No".

Saludos

axelb · #19 (**permalink**) 02/01/2015, 20:06

Buenas, como estan?? He logrado arreglarlo y adaptarlo para lo que necesitaba!! Lo hice asi:

Código Javascript:

Ver originalfunction enlace(){
    var a = new Array()
    var cant = document.getElementById('escondido').value;
    for(var c=0;c<=cant;c++){
        var id = document.getElementById('check'+c);
        if(id.checked){
            a[c]=id.value
        }
    }
    location.href = "check_modificar.php?re="+a;
}

Código HTML:

Ver original<form name="frm">
<input type='hidden' id='escondido' value='1'>
<input id="check0" type="checkbox" name="b" value="Si">Si
<input id="check1" type="checkbox" name="b" value="No" checked>No
</form>
<a href="javascript:enlace()">Eliminar</a>

Gracias a todos por ayudarme!! Saludos y que tengan un excelente 2015!!

Alexis88 · #20 (**permalink**) 02/01/2015, 23:45

¿Estás concatenando un array a una cadena?

De esa manera, estarías enviando a los valores seleccionados, contenidos en una sola variable y separados mediante comas. Creo que mejor sería que envíes al array como un objeto JSON, parseándolo con el método JSON.stringify y en tu archivo PHP, lo decodificas con la función json_decode.

Saludos

axelb · #21 (**permalink**) 03/01/2015, 15:00

la verdad que no entiendo nada de js y lo que hice lo logre mezclando lo que ya tenia hecho mas las ayuda de ustedes, pero que las variables sean visibles en la url, de verdad que no es un problema en mi caso, he logrado tal cual lo que necesitaba, pero tendré en cuenta eso que me dices!

Saludos