Conocer el ID de un Radio Button

[carolca79]

Amigos,

Tengo una duda que quisiera presentarles para ver si me pueden ayudar.

Lo siguiente es:

Tengo una lista que es construida por un PHP que verifica las filas de una tabla a través de una sentencia SELECT. Esa lista se imprime con Radio Buttons, para poder así seleccionar uno de la lista.
Además de eso tengo dos botones (buttons) que redireccionan el "action" del formulario a través de un JavaScript a través del OnClick()
Bien sabemos que el action es un evento que toma una referencia, en mi caso una URL. Y con esta URL debería de viajar una variable "id" ejemplo: www.dominio.com/pagina2.php?id=16

Bien pues, lo que tengo de idea es que, cuando se haga click en el radiobutton pueda cambiar el valor de la variable que se pasara con el action.

Expongo los ejemplos prácticos:

Código HTML:

<input type="radio"> Tiene id 1
<input type="radio"> Tiene id 2
<input type="radio"> Tiene id 3
<input type="radio"> Tiene id 4

Ahora lo tengo echo en PHP, pero como sabemos es server side no puedo hacer lo que necesito, entonces recurro a javasscript. Esto es lo que tenía antes en PHP:

Código PHP:

 <input type="button" name="btn_modificar" onclick="changeAction('modificar_galeria.php?id=<?php echo $id_album ?>')" value="Modificar"/>  

y que con el javascript sea algo asi:
Si se presiono el radiobutton que tiene id=1

Código HTML:

<input type="button" name="btn_modificar" onclick="changeAction('modificar_galeria.php?id=1')" value="Modificar"/> 

Si se presiono el radiobutton que tiene id=2

Código HTML:

<input type="button" name="btn_modificar" onclick="changeAction('modificar_galeria.php?id=2')" value="Modificar"/> 

Si se presiono el radiobutton que tiene id=3

Código HTML:

<input type="button" name="btn_modificar" onclick="changeAction('modificar_galeria.php?id=3')" value="Modificar"/> 

Si se presiono el radiobutton que tiene id=4

Código HTML:

<input type="button" name="btn_modificar" onclick="changeAction('modificar_galeria.php?id=4')" value="Modificar"/> 

Creo que ha de ser sencillo lo que les presento pero soy novato en JavaScript.

Gracias por la ayuda,

[TurKa]

Hola carolca:

Lo primero que deberías hacer es insertar como valor de cada radio la ID del mismo, que traes con PHP (y por cierto, agregarle un nombre al grupo de radio buttons):

Código:

<input type="radio" value="<? echo fila->$row["id"]; ?>" name="listado">

Después, solo te queda hacer un script que compruebe el valor (value) del radio seleccionado para obtener la ID elegida por el usuario y la agregue al action del botón pulsado.

Se puede ahorrar trabajo haciendo todo en un mismo script pero si después lo tenés que modificar me parece más sencillo hacer dos scripts diferentes: 1) para obtener la ID seleccionada; 2) para modificar la URL del action según el botón pulsado;

Código:

<script language="JavaScript" type="text/javascript">
//esta función es para obtener la ID seleccionada
var var_id = 0;
function ObtenerID(form) {
	for(i=0;i<form.listado.length;i++) {
		if(form.listado[i].checked == true) {
			var_id = form.listado[i].value;
		}
	}
}

//esta otra cambia la URL del action agregando la ID obtenida
function CambiarAction(pagina) {
	nombre_del_form.action = pagina + "?id=" + var_id;
	nombre_del_form.submit();
}
</script>

Después solo te restará llamar a las funciones de la siguiente forma:

A la función que obtiene la ID, la llamas cuando el usuario pulsa un radio

Código:

<input type="radio" value="<? echo fila->$row["id"]; ?>"  onClick="ObtenerID(this.form)" name="listado">

A la función que cambia el action, al pulsar cada botón:

Código:

<input type=button value="Acción Uno" OnClick="CambiarAction('pagina1.php')">
<input type=button value="Acción Dos" OnClick="CambiarAction('pagina2.php')">

Espero que te sirva!

Saludos!!

[carolca79]

muchisimas gracias por responderme Turka,
Pero sabes que hay algo que no me está funcionando y no sé qué es...

fíjate, es esto lo que he hecho:

la función ObtenerID() funciona perfectamente, pero la otra, CambiarAction() es la que no me hace el submit, no sé por qué...

Código HTML:

//esta funcion es para obtener la ID seleccionada
	var var_id = 0;
	function ObtenerID(form)
	{
		for(i=0; i < form.id_album.length; i++)
		{
			if(form.id_album[i].checked == true)
			{
				var_id = form.id_album[i].value;
			}
		}
	}

//esta otra cambia la URL del action agregando la ID obtenida

	function CambiarAction(pagina)
	{
		hola = pagina + "?id=" + var_id;
		alert(hola);
	
		formu.action = pagina + "?id=" + var_id;
		formu.submit();
	}

El tag del form:

Código HTML:

<form method="post" action="/salesianos/admin/listadoGaleria.php" name="formu"> 

Los radio buttons de ejemplo, tal cual se imprime en el browser:

Código:

<p style="margin-top: 0; margin-bottom: 0" align="left"> <font face="Arial">
<label>
<input type="radio" name="id_album" value="1" onClick="ObtenerID(this.form)"/>

Galeria Don Pichini(2007-08-30 02:43:23.60992)

</label>
</font>
</br>


<label>
<input type="radio" name="id_album" value="7" onClick="ObtenerID(this.form)"/>


Galeria de Prueba(2008-01-23 11:56:54.104316)

</label>
</font>
</br>
</p>

El botón que se presiona y tiene que hacer el action:

Código HTML:

<input type="button" name="btn_modificar" value="Modificar" onClick="CambiarAction('modificar_galeria.php')" /> 

Dos cosillas, me haz dicho que agrupe los radio buttons en grupos, y para ello utilicé el <label>, que según leí servía para eso (supuestamente). Pero me ubica los botones uno al lado de otro.

Y lo otro es que no se por qué no hace el submit el botón. Hice la variable "hola" y el alert() para ver si se imprime bien el string "pagina.php?id=12".

Cuál puede ser mi error?

Gracias,

PD: Disculpa el retraso

[carolca79]

Turka,

Ya pude con lo del javascript, era cosa de ponerle el "document.formu" a la sentencia

ahora bien, cómo podría solucionar lo de los radio buttons?

Gracias,

[TurKa]

Iniciado por carolca79

ahora bien, cómo podría solucionar lo de los radio buttons?

Hola carolca!
Me expresé mal con lo de agrupar los radio buttons. En realidad debí haber dicho colocarle a todos los radio el mismo nombre. La etiqueta label se refiere a otra cosa, y esto es al texto que corresponde a un determinado campo.


En ejemplo que te pasé, todos los radio generados dinámicamente con PHP (siempre y cuando hagas un bucle con los mismos) tendrán el mismo nombre (listado):

Código:

<input type="radio" value="<? echo fila->$row["id"]; ?>"  onClick="ObtenerID(this.form)" name="listado">

Pero si los radio no los generas dinámicamente, simplemente a todos los colocas el mismo nombre manualmente:

Código:

<input type="radio" value="valor del radio 1"  onClick="ObtenerID(this.form)" name="listado">
<input type="radio" value="valor del radio 2"  onClick="ObtenerID(this.form)" name="listado">
<input type="radio" value="valor del radio 3"  onClick="ObtenerID(this.form)" name="listado">

Con eso será suficiente

Cualquier problema, avisas

Saludos!

[carolca79]

TurKa,

Ahora me encontré con la siguiente situación:

borré todos los registros de mi BD y dejé solamente uno, el cual solo genera un radio button. Perfecto en eso no hay problema.

Pero, al hacer submit no tira el ID que fue pasado por el radio button sino que pasa ID= 0

Código HTML:

//esta funcion es para obtener la ID seleccionada
	var var_id = 0;
	function ObtenerID(form)
	{
		for(i=0;i < form.id_album.length;i++)
		{
			if(form.id_album[i].checked == true)
			{
				var_id = form.id_album[i].value;
			}
		}
	}

//esta otra cambia la URL del action agregando la ID obtenida
	function CambiarAction(pagina)
	{
		hola = pagina + "?id=" + var_id;
		alert(hola);
		document.formu.action = pagina + "?id=" + var_id;
		document.formu.submit();
	}

El radio button:

Código HTML:

<input type="radio" name="id_album" value="1" onClick="ObtenerID(this.form)"/>
CG - 26(2008-02-29 19:52:08.476792)
</font>
</br> 

El botón:

Código HTML:

<input type="button" name="btn_modificar" onClick="CambiarAction('modificar_galeria.php')" value="Modificar"/> 

Fíjate que el radio button tiene valor = 1, pero al hacer el alert puedo ver que es cero el valor...
Puede que sea algo del ciclo for?

Gracias,

[TurKa]

sisi, es por el bucle for. En ese caso hay que agregarle un par de líneas al script para que se salte el bucle en caso que solo haya un radio button.

El script quedaría así:

Código:

var var_id = 0;
function ObtenerID(form) {
	if(form.id_album.length < 2) {
		var_id = form.id_album.value;
	} else {
		for(i=0;i < form.id_album.length;i++) 		{
			if(form.id_album[i].checked == true) {
				var_id = form.id_album[i].value;
			}
		}
	}
}

Fijate si funciona porque no lo probé

[carolca79]

No, no me ha resultado.
Obtengo de valor cero todavia

[carolca79]

Una ayuda ??