Problema con Jquery en codigo PHP

[juanifioren]

Buenas tardes a todos, es mi primer posteo en la web, siempre he seguido este foro ya que me di cuenta que el soporte es grandioso (a ver si me sacan unas dudas). Estoy programando un script en php pero decidi actualizarlo metiendole un poco de Ajax de Jquery. Soy muy novato en JS.
Les cuento lo que quiero hacer rapidito:
ya tengo un registro de usuarios con php y quisiera implementarle ajax, es decir que cuando se envie mediante POST no se refresque la pagina y aparezca el bloque que me indique el error o si se registro bien, todo esto sin refrescar.

Este es mi REGISTRO.PHP :

Código:

echo'<table border="0" align="center"><tr><td align="center">';
 
	//Formulario de registro
	if (isset($_POST['submit']))
	{   
	  //Controlamos los campos vacios 
	  if (empty($_POST['nick']) || empty($_POST['email']) || empty($_POST['pass']) || empty($_POST['repass']))
	  {  
		echo '<div class="redbox">Se deben completar todos los campos</div>';	 	
	  }
	  //Restringimos el nick y el pass a solo A-Z y 0-9 y de 4 a 20 caracteres
	  elseif (!validar_np($_POST['nick']) || !validar_np($_POST['pass']))
	  {
		echo '<div class="redbox">Nick y contrase&ntilde;a solo admiten letras y numeros entre 4 y 20 caracteres</div>'; 			
	  }
	  //Validamos el email con un filtro
	  elseif (!validar_mail($_POST['email']))
	  {                 
		echo '<div class="redbox">El email no es valido</div>';
	  }
	  //Controlamos si las pass son distintas
	  elseif ($_POST['pass'] <> $_POST['repass'])
	  {
		echo '<div class="redbox">Las contrase&ntilde;as no coinciden</div>';
	  }
	  else
	  {
		//Nos fijamos si el nick ya existe
		$nick = mres($_POST['nick']);
				
		$sql = "SELECT nick FROM usuarios WHERE nick='$nick'";
		$query = mysql_query($sql);
				
		if ($nick = @mysql_fetch_array($query))
		{
		  echo '<div class="redbox">El nick ya esta registrado</div>';
		}
		//Esta todo correcto, entonces cargamos variables a la DB
		else
		{      
			   $nick = mres($_POST['nick']);
			   $pass = mres(md5($_POST['pass']));
			   $email = mres($_POST['email']);
			   $date = time();                          
			   $ipuser = $_SERVER['REMOTE_ADDR'];            
				 
			   $query = "INSERT INTO usuarios (nick,email,pass,fecha,ip) VALUES ('$nick','$email','$pass','$date','$ipuser')";
			   $resul = mysql_query($query); 
			   if (!$resul)
			   {
				 echo '<div class="redbox">Se ha producido un error</div><meta http-equiv="Refresh" content="2;url=/">';
			   }
			   //Todo salio bien y se acaba de registrar
			   else
			   {
				 echo '<div class="greenbox">Registro exitoso! Ahora ingrese sus datos...</div>
					   <meta http-equiv="Refresh" content="2;url=/index.php?p=login">';
			   }
		}	  
	   }
	}			  

echo '</td>
<tr>
<tr>
<td align="center">
<div class="title" style="width:500px">Registrate</div>
<div class="window" style="width:500px">

	  <form id="registro" name="registro" method="post"/>
	  	  
		  <table width="430" height="100" border="0" align="center">
		  <tr>
		  <td collspan="2"><div id="mensaje"></div></td>
		  </tr>
		  <tr>
		  <td width="215" align="left"><h3>Nick</h3></td>
		  <td width="215" align="right"><input type="text" id="nick" name="nick" class="campo"/></td>
		  </tr>
		  <tr>
		  <td align="left"><h3>Email</h3></td>
		  <td align="right"><input type="text" id="email" name="email" class="campo"/></td>
		  </tr>
		  <tr>
		  <td align="left"><h3>Contrase&ntilde;a</h3></td>
		  <td align="right"><input type="password" id="pass" name="pass" class="campo"/></td>
		  </tr>
		  <tr>
		  <td align="left"><h3>Confirmar Contrase&ntilde;a</h3></td>
		  <td align="right"><input type="password" id="repass" name="repass" class="campo"/></td>
		  </tr>
		  <tr>
		  <td></td>
		  <td align="right"><input type="submit" id="submit" name="submit" class="boton boton-verde" value="Registrar"/>
		      <input type="reset" name="limpiar" class="boton boton-gris" value="Limpiar" /></td>
		  </tr>
		  </table><hr><center><a href="index.php?p=login" class="bold px14">&iquest;Ya estas registrado?</a></center>
		   
	</form>
	</div>
	
	</td>
</tr><tr>
<td></td></tr></table>';

bueno el codigo php me funciona perfecto pero ahora lei un poco hacerca de Jquery y su funcion Ajax y cree un codigo que capas me funcione, se los dejo y me dicen si estoy errado o entendi mal o me faltan unas cosas (no soy bueno en JS empece solo hace semanas)

Código:

<script type="text/javascript">

    $(document).ready(function(){  
        $("form#registro").submit(function() {  
		
        var nick    = $("#nick").attr("value");  
        var email   = $("#email").attr("value");
		var pass    = $("#pass").attr("value");  
		var repass  = $("#repass").attr("value");
		
            $.ajax({  
                type: "POST",  
                url: "index.php?p=registro",  
                data: " nick="+nick+" & 
				        email="+email+" &
						pass="+pass+" &
						repass="+repass,  
                success: function(){  
                    $("form#registro").hide(function(){$("div.redbox").fadeIn();});        
                }  
            });  
        return false;  
        });  
    });  
</script>

¿Como puedo unir las funciones de php con Jquery?

Muchas gracias.

[caricatos]

Tema movido desde javascript

[maycolalvarez]

¿para que concatenas todo manualmente?: usa $('#registro').serialize()

cuando usas ajax se supone que asignes una capa DIV como receptora de la respuesta HTML (en el caso de que la respuesta sea HTML), en cuyo caso debes usar $('#micapadiv').html(data);

ejemplo:

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){  
    $("#registro").submit(function() {  
        $.ajax({  
            type: "POST",  
            url: "index.php?p=registro",  
            data: $("#registro").serialize(),  
            success: function(data){ 
                   $("#registro").hide(function(){
                    $("div.redbox").html(data);
                    $("div.redbox").fadeIn();
                });        
            }  
        });  
        return false;  
    });  
});  
</script>