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ñ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ñ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ña</h3></td>
<td align="right"><input type="password" id="pass" name="pass" class="campo"/></td>
</tr>
<tr>
<td align="left"><h3>Confirmar Contraseñ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">¿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.