Foros del Web - Ver Mensaje Individual

emprear · #6 (**permalink**) 04/01/2013, 08:11

Probá con esto

loguin.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Form básico - mostrar ocultar loguin</title>
<style type="text/css">
/*<![CDATA[*/
body{
font-family: verdana, sans-serif;
font-size: 10pt;
}
#loguin{
width: 350px;
padding: 5px;
background: lime;
border-radius: 8px;
}
.entrar{
cursor: pointer;
font-weight: bold;
}
fieldset#acceso{
width: 350px;
background: orange;
border-radius: 8px;
}
 
/*]]>*/
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
function validar(){
var elNombre = document.getElementById('nombre');
if(elNombre.value == ''){
document.getElementById('error_nombre').innerHTML = "Falta nombre";
return false;
}
}
//]]>
</script>
</head>
<body>
<div id="loguin"> tiene una cuenta? <span class="entrar">Ingresar aqui</span></div>
<fieldset id="acceso">
<form action="procesar.php" method="post" onsubmit="return validar();">
<p>
<label for="nombre">Nombre</label>
<input type="text" value="" id="nombre" name="nombre" autocomplete="off" /> <span id="error_nombre"><!-- mensaje de error --></span><br /><br />
<input type="submit" value="procesar" name="procesando" />
</p>
</form>
</fieldset>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $("fieldset#acceso").hide();
 $(".entrar").click(function() {       
 $("#loguin").hide();
 $("fieldset#acceso").show(300);
 });
   
 $(document).mouseup(function(e){
 var contenedor = $("fieldset#acceso");
 if (contenedor.has(e.target).length === 0){
  $("#error_nombre").text('');
  $("#nombre").val('');
  contenedor.hide();
  $("#loguin").show();
 }
 });
 
});
//]]>
</script>
</body>
</html>

procesar.php

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Form básico - demo - procesando</title>
</head>
<body>
<?php
$usuario = $_POST['nombre'];
 
if(isset($usuario)){
echo "<p>Se envió \$_POST['nombre']</p>";
}
 
if($usuario == null){
echo "<p>el usuario es NULL</p>";
}
 
if(empty($usuario)){
echo "<p>el usuario es empty</p>";
}
 
if($usuario == ''){
echo "<p>el usuario es vacio</p>";
}
echo "El usuario es: <b>" . $usuario . " </b>";
?>
<p>
<a href="loguin.html">Enviar otra vez</a>
</p>
</body>
</html>

El php es algo muy básico solo a efectos de la comprobación. y la validación en el html también. Ahora lo que te faltaría es procesar el form con $.ajax()

Saludos