validacion con ajax mi archivo principal php
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="../../../js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
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 enviarDatosEmpleado(){
//donde se mostrará lo resultados
divResultado = document.getElementById('resultado');
divFormulario = document.getElementById('formulario');
//valores de los inputs
Id_Contacto=document.frmempleado.Id_Contacto.value;
Name=document.frmempleado.Name.value;
Lastname=document.frmempleado.Lastname.value;
Sex=document.frmempleado.Sex.value;
Phone=document.frmempleado.Phone.value;
Email=document.frmempleado.Email.value;
Direction=document.frmempleado.Direction.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
//usando del medoto POST
//archivo que realizará la operacion
//actualizacion.php
ajax.open("POST", "actualizacion.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar los nuevos registros en esta capa
divResultado.innerHTML = ajax.responseText
//mostrar un mensaje de actualizacion correcta
divFormulario.innerHTML = "<p style=\"border:1px solid red; width:380px;\">La actualización se realizó correctamente</p>";
}
}
//muy importante este encabezado ya que hacemos uso de un formulario
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("Id_Contacto="+Id_Contacto+"&Name="+Name+"&Lastname="+Lastname+"&Sex="+Sex+"&Phone="+Phone+"&Email="+Email+"&Direction="+Direction)
}
function pedirDatos(Id_Contacto){
// document.getElementById('x').style.display='block';
//donde se mostrará el formulario con los datos
divFormulario = document.getElementById('formulario');
document.getElementById('x').style.display='block';
document.getElementById('insideform').style.display='block';
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod GET
ajax.open("POST", "consulta_por_id.php");
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divFormulario.innerHTML = ajax.responseText
//mostrar el formulario
divFormulario.style.display="block";
}
}
//como hacemos uso del metodo GET
//colocamos null
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("Id_Contacto="+Id_Contacto)
}
$(document).ready(function(){
$("#x").click(function(){
$("#formulario, #x, #insideform").fadeOut(800, function(){
});
});
});
</script>
<style>
#insideform {
background-color:#000000;
height:48%;
top:26%;
width:37%;
left:32%;
position:absolute;
z-index:20;
filter:alpha(opacity=60);
opacity:0.6;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#formulario {
background-color:#000;
color:#F8C11D;
height:38%;
top:29%;
width:32%;
left:33.5%;
position:absolute;
z-index:22;
padding-top:2%;
padding-left: 2%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#x {
color:#fff;
height:auto;
width:auto;
position:absolute;
z-index:23;
top:29%;
right:34%;
font-weight: bold;
}
#xy{
width:300px;
height:25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#F5F5F5;
border: thin solid #CCCCCC;
color: #003366;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Modificar datos del empleado</h2>
<p>Clic en el código del empleado para modificar sus datos. </p>
<div id="formulario" style="display:none;"></div>
<div id="x" style="display:none;">Cerrar</div>
<div id="insideform" style="display:none;"></div>
<div id="resultado">
<?php
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "agenda";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//consulta todos los empleados
$sql=mysql_query("SELECT * FROM contactos",$con);
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Id</td>
<td>Nombre</td>
<td>Apellidos</td>
<td>Sexo</td>
<td>Telefono</td>
<td>Email</td>
<td>Direccion</td>
</tr>
<?php
while($modificar = mysql_fetch_array($sql)){
echo " <tr>";
//mediante el evento onclick llamaremos a la funcion PedirDatos(), la cual tiene como parametro
//de entrada el ID del empleado
echo " <td><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\"pedirDatos('".$modificar['Id_Contacto']."')\">".$modificar['Id_Contacto']."</a></td>";
echo " <td>".$modificar['Name']."</td>";
echo " <td>".$modificar['Lastname']."</td>";
echo " <td>".$modificar['Sex']."</td>";
echo " <td>".$modificar['Phone']."</td>";
echo " <td>".$modificar['Email']."</td>";
echo " <td>".$modificar['Direction']."</td>";
echo " </tr>";
}
?>
</table>
</div>
</body>
</html> Código PHP:
<?php
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "agenda";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//consulta los datos del empleado por su id
$Id_Contacto=$_POST['Id_Contacto'];
$sqls=mysql_query("SELECT * FROM contactos WHERE Id_Contacto=$Id_Contacto",$con);
$row3 = mysql_fetch_array($sqls);
//valores de las consultas
$Id_Contacto=$row3['Id_Contacto'];
$Name=$row3['Name'];
$Lastname=$row3['Lastname'];
$Sex=$row3['Sex'];
$Phone=$row3['Phone'];
$Email=$row3['Email'];
$Direction=$row3['Direction'];
//muestra los datos consultados en los campos del formulario
?>
<form name="frmempleado" action=""
onsubmit="enviarDatosEmpleado(); return false">
<input name="Id_Contacto" type="hidden" value="<?php echo $Id_Contacto; ?>" />
<table width="336" border="0">
<tr>
<td><div align="right">Nombre</div></td>
<td><input name="Name" type="text" value="<?php echo $Name; ?>" id="xy" onkeypress="return validar(event)"/></td>
</tr>
<tr>
<td><div align="right">Apellido</div></td>
<td><input name="Lastname" type="text" value="<?php echo $Lastname; ?>" id="xy"/></td>
</tr>
<tr>
<td><div align="right">Sexo</div></td>
<td><select name="Sex" id="xy">
<?php
echo "<option value=\"".$Sex."\">".$Sex."</option>"
?>
<option value="Femenino">Femenino</option>
<option value="Masculino">Masculino</option>
</select></td>
</tr>
<tr>
<td><div align="right">Telefono</div></td>
<td><input name="Phone" type="text" value="<?php echo $Phone; ?>" id="xy"/></td>
</tr>
<tr>
<td><div align="right">Email</div></td>
<td><input name="Email" type="text" value="<?php echo $Email; ?>" id="xy"/></td>
</tr>
<tr>
<td><div align="right">Direccion</div></td>
<td><input name="Direction" type="text" value="<?php echo $Direction; ?>" id="xy"/></td>
</tr>
<tr>
<td><div align="right"></div></td>
<td><div align="right">
<input type="submit" name="boton2" value="Actualizar" id="update"/>
</div></td>
</tr>
</table>
<p> </p>
</form> y mi actualizacion
Código PHP:
<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "agenda";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//variables POST
$Id_Contacto=$_POST['Id_Contacto'];
$Name=$_POST['Name'];
$Lastname=$_POST['Lastname'];
$Sex=$_POST['Sex'];
$Phone=$_POST['Phone'];
$Email=$_POST['Email'];
$Direction=$_POST['Direction'];
//actualiza los datos
$sql1="UPDATE contactos SET Name='$Name', Lastname='$Lastname', Phone='$Phone', Email='$Email', Direction='$Direction', Sex='$Sex' WHERE Id_Contacto=$Id_Contacto";
mysql_query($sql1,$con);
include('consulta.php');
?> 
