hola espero puedan ayudarme con esta duda que tengo, es respecto a como debo validar con ajax y evitar que se envien los campos de mi formulario antes de ser enviados, ya que estoy haciendo una modificacion hasta el momento todo funciona perfectamente, imprimo mis datos en una tabla, al dar clic en el id de algun registro en un div lightbox con campos imprimo los datos del registro para que puedan ser modificados, la idea es que ninguno de estos campos se actualizen si estan vacios, me explico, bueno les anexo mi codigo espero puedan ayudarme gracias
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>
mi consulta por id
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>
aqui radica mi problema, como hago para que al presionar el boton2 verifique que si el campo esta vacio no envie mi formulario?
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');
?>