¿como usar los input type="radio" en ajax?

jchg001 · #1 (**permalink**) 15/11/2010, 15:40

Hola, esta es mi segunda consulta en el foro y la primera en la seccion Ajax.
Tengo lo siguiente:

"funcionAjax.js"

Código:

function objetoAjax()
{
	var xmlhttp=false;
	try
	{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} 
		catch (E)
		{
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined')
	{
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function pedirDatos(url,capa,valores,metodo)
{
	var ajax=objetoAjax();
	var capaContenedora = document.getElementById(capa);
	ajax.open ('POST', url, true);
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState==4)
		{
			document.getElementById(capa).innerHTML=ajax.responseText;
		}
	}
	ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	ajax.send(valores);
	return;
}

"index.php"

Código HTML:

<html>
<head>
	<title>Probando Ajax</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="funcionAjax.js"></script>
</head>
<body>
	<form method="post"  action="#">
		<input type="text" id="campo" /><br>
		Opcion 1: <input type="radio" name="opcion" id="opcion" Value="opcion 1" /><br>
		Opcion 2: <input type="radio" name="opcion" id="opcion" Value="opcion 2" /><br>
	        <input type="submit" value="enviar" onclick="pedirDatos('mostrar.php','capaContenedora',
	         'campo='+document.getElementById('campo').value+'&amp;opcion='+document.getElementById('opcion').value,'POST'); return false" />
	</form>
	<div id="capaContenedora"></div>
</body>
</html>

y "mostrar.php"

Código HTML:

<?php
	echo "texto ingresado: ".$_POST["campo"]."<br>";
	echo "opcion seleccionada: ".$_POST["opcion"];
?>

Tengo problema con los input type="radio" que agregue al codigo en "index.php", osea, me envía siempre el value="opcion 1" a pesar de seleccionar el radio que tiene la "opcion 2" e incluso sin seleccionar ninguno. El valor del input type="text" lo envia sin problema.

Aclaro que soy novato en esto de ajax, y arme estos códigos de muchos ejemplos de internet y los adapté a mi forma de trabajar.

IsaBelM · #2 (**permalink**) 15/11/2010, 16:40

dale un nombre al formulario y recoge el valor del radio así

Cita:

opcion='+document.nombre_formulario.opcion[0].checked ? document.nombre_formulario.opcion[0].value : document.nombre_formulario.opcion[1].value+'

jchg001 · #3 (**permalink**) 15/11/2010, 18:10

Gracias IsaBelM, pero sigo con problemas. Realicé los cambios solo en el formulario y ahora es así:

Código PHP:

Ver original<form name="formulario" method="post"  action="#">
     <input type="text" id="campo" /><br>
     Opcion 1: <input type="radio" name="opcion" id="opcion1" Value="opcion 1" /><br>
     Opcion 2: <input type="radio" name="opcion" id="opcion2" Value="opcion 2" /><br>
     <input type="submit" value="enviar" onclick="pedirDatos('mostrar.php','capaContenedora','campo='+document.getElementById('campo').value+'&amp;opcion='+document.formulario.opcion[0].checked ? document.formulario.opcion[0].value : document.formulario.opcion[1].value+,'POST'); return false" />
</form>

Pero me muestra nada, ni siquiera el valor del input type="text" que antes lo mostraba bien, ademas me di cuenta que ahora se recarga la página completa. ¿Será algún error de sintaxis?, los dos últimos caracteres de tu sugerencia +' ¿son necesarios en este ejemplo?.

IsaBelM · #4 (**permalink**) 16/11/2010, 06:50

sí, tienes razón, se me escapó. ahora releyendo hay un problema. no puedes pasarle la variable con nombre. otra cosa que yo cambiaría, sería el input submit por un botón

Cita:

ahora al recoger las variables, tienes que añadirle un valor mas

Cita:

function pedirDatos(url,capa,text,radio,metodo)