Tratar formulario con javascript

[Flinki]

Buenas, os comento mi problema.
Tengo un formulario que tiene que cargar una pagina con ajax (paginador.php). Puesto que no quiero que se recargue la página entera, lo hago de la siguiente forma:

Código HTML:

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 Pagina(pagina){


	//donde se mostrará los registros

	divContenido = document.getElementById('contenido');

	

	ajax=objetoAjax();

	//uso del medoto GET

	//indicamos el archivo que realizará el proceso de paginar

	//junto con un valor que representa el nro de pagina

	ajax.open("GET", pagina);

	divContenido.innerHTML= '<img src="anim.gif">';

	ajax.onreadystatechange=function() {

		if (ajax.readyState==4) {

			//mostrar resultados en esta capa

			divContenido.innerHTML = ajax.responseText

		}

	}

	//como hacemos uso del metodo GET

	//colocamos null ya que enviamos 

	//el valor por la url ?pag=nropagina

	ajax.send(null)

}

el formulario es el siguiente:

Código HTML:

<form method="get" id="formulario" class="inlineRadios">
	<input type="hidden" name="paso" value="0"/>	
	<table width="100%" height="100%" align="center" valign="center" border="0px" style="background: url(../../images/fondo_registro.png) no-repeat">
		<tr><td>
			<table align="center" width="90%" height="80%" border="0">		
				<tr><td valign="top" colspan="3" width="80px">
				<p class="registro"><b>Selecciona una opción</b></p>
				<p class="registro2">Si sois un grupo, un cantante en solitario o un músico</p>
				</td></tr>
				
				<tr><td width="30px"></td>
				<td><br/>
				<table align="left" border="0">
					<tr>
						<td><label class="check" for="radio-1" tabindex="1" id="check">Grupo</label>
						<span>Podreis dar vuestra música a conocer</span></td>
						<td><input type="radio" name="tipo" id="radio-1" value="grupo" CHECKED />
						</td>
					</tr>
					<tr>
						<td><br/><br/><label class="check" for="radio-2" tabindex="2">Cantante</label>
						<span>Podrás buscar grupos en los que cantar</span></td>
						<td><input type="radio" name="tipo" id="radio-2" value="cantante" /></td>					
					</tr>
					<tr>
						<td><br/><br/><label class="check" for="radio-3" tabindex="3">Músico</label>
						<span>Podrás buscar grupos en los que tocar</span></td>
						<td><input type="radio" name="tipo" id="radio-3" value="musico" /></td>					
					</tr>				
				</table>

				</td></tr>
					
				
				<tr><td></td>
				<td><br/><input class="continuar" type="button" value="Continuar" onclick="Pagina('paginador.php')"></td>
				<td width="30px"></td></tr>					
				<tr><td height="100%"></td></tr>
			</table>
		</td></tr>
	</table>
</form> 

Como podeis ver, al hacer click en el boton envar, se carga sólo la página paginador.php. Sin embargo no se como pasarle los parámetros del formulario (ya que tengo que tratarlos en la página paginador.php)

Supongo que tengo que hacer algo en la funcion Pagina de javascript, pero no se como.
Un saludo y gracias de antemano.

[maycolalvarez]

puedes acceder a los parámetros de un form de varias formas:

Código Javascript:

var valor1 = document.forms['name_form'].elements['name_input'].value;
var valor2 = document.getElementById('input_id').value;
 

y para pasar dichos valores por GET, simplemente debes de concatenarlos como una cadena URL:

Código Javascript:

ajax.open ('GET', pagina + '?valor1=' + valor1 + '&valor2=' + valor2);
 

y por POST más simple aún:

Código Javascript:

ajax.send( 'valor1=' + valor1 + '&valor2=' + valor2 ):
 

PD: el ajax nunca te funcionará de forma adecuada sin evaluar: ajax.status==200

[caricatos]

Hola:

Cargar páginas enteras con Ajax es definitivamente un mal uso de la tecnología... y si esas página tienen su propio body y head y html y doctype, es sencillamente una burrada (no lo tomes como un insulto o similares...)

Sobre la llamada, tampoco te olvides el parámetro tercero que indica el sincronismo.

Sobre los parámetros, te lo explica bien maycolalvarez, pero para la llamada, continuando con los reproches, si se desactiva javascript tu código no tiene ninguna utilidad, así que una buena técnica es usar un botón submit normal y para que funcione ajax, al final se cancela ese submit con return false...
<form onsubmit="return consulta_ajax(this)"...

Saludos

[Flinki]

Muchas gracias a los dos por responder.
Vayamos por partes, primero me gustaría conseguir pasar por POST (mejor que por GET) los parámetros a la página nueva.
Lo hago como dice maycolalvarez de forma que quedaría de las siguiente forma:

Código:

function Pagina(pagina){

	var valor1 = document.forms['formulario'].elements['tipo'].value;
	//donde se mostrará los registros
	divContenido = document.getElementById('contenido');

	ajax=objetoAjax();
	ajax.open("GET", pagina);
	divContenido.innerHTML= '<img src="anim.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//mostrar resultados en esta capa
			divContenido.innerHTML = ajax.responseText
		}
	}

	ajax.send('valor1=' + valor1);

}

y la pagina que quiero cargar sólo tiene lo siguiente:

Código PHP:

  $valor1=$_POST['valor1']; 
    echo $valor1;  
   

Me carga bien esta página pero no me imprime $valor1. Debo estar haciendo algo mal.

Caricatos, no cargo páginas enteras :) don't worry. Cuando consiga que funcione todo lo anterior me pongo a mirar lo del submit =)

Gracias a los dos de nuevo.

[Flinki]

Alguna idea? :)