Modificar registros en linea con Blur, jQuery, Ajax y PHP
En este artículo vas a descubrir como editar o modificar un registro de la base de datos sin necesidad de pulsar un botón para guardarlo utilizando el evento blur y Ajax.
Voy a usar el evento blur con Ajax y jQuery para que al salir de un campo de texto o «input» se proceda a guardar la información directamente en la base de datos.
Imagínate que estás una página web donde se registran usuarios como, por ejemplo, una tienda o una comunidad web.
En este tipo de páginas siempre hay un apartado o página donde puedes modificar los datos de tu cuenta.
En el ejemplo en funcionamiento vas a ver como ofrecer al usuario la posibilidad de modificar su cuenta sin necesidad de recargar la página ni de pulsar un botón para enviar los datos al servidor.
Todo esto modificando sus datos en linea justo después de abandonar el «input» o campo de texto utilizando el evento «blur» con jQuery.
La idea o funcionamiento que deseo ilustrar con este artículo es que cada vez que se edite un campo y se pase al siguiente se guarde la nueva información en la base de datos directamente.
Formulario HTML con datos dinámicos
En el cuerpo de la página o dentro de la etiqueta <body>, puedes agregar un formulario como el siguiente:
<form action="#">
<div class="form-group">
<label for="name">Nombre</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text validation"></span>
</div>
<input type="text" class="form-control" name="name" id="name" value="<?=$row['name']?>" maxlength="32">
</div>
</div>
<div class="form-group">
<label for="lastname">Apellidos</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text validation"></span>
</div>
<input type="text" class="form-control" name="lastname" id="lastname" value="<?=$row['lastname']?>" maxlength="75">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text validation"></span>
</div>
<input type="email" class="form-control" name="email" id="email" value="<?=$row['email']?>" maxlength="75">
</div>
</div>
</form>
Se trata de un formulario simple con 3 campos: nombre, apellidos y email que relleno automáticamente con sus correspondientes valores que hay guardados en una base de datos.
Para cada campo también tengo un span con class=»validation» que utilizo para confirmar los cambios visualmente.
Sobre el diseño o aspecto no voy a hacer mucho incapié. Tan solo debes saber que estoy utilizando Bootstrap 4.
Conexión con la base de datos y retorno del resultado
Para tener disponible el array $row con los datos del usuario, en la misma página, justo por encima del formulario debes conectar con la base de datos y realizar la consulta correspondiente:
<?php
include('config.php');
$result = $conexion->query("SELECT * FROM `users3` WHERE id_user=1");
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
}
?>
El archivo config.php se encarga de crear la conexión con la base de datos. Su contenido tan solo es lo siguiente:
<?php
$connexion = new mysqli('localhost', 'USUARIO', 'PASSWORD', 'BASE DE DATOS');
?>
Ten en cuenta que debes cambiar los parámetros de la llamada a la clase mysqli con el usuario, contraseña y nombre de la base de datos que vayas a utilizar.
Evento blur con jQuery y llamada Ajax
Ahora tan solo queda el código más interesante.
La estructura del formulario que pusimos más arriba es vital para que funcione correctamente el código jQuery siguiente:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input').on('blur', function() {
var field = $(this);
var validationField = field.parent().find('.validation');
var dataString = 'value='+field.val()+'&field='+field.attr('name');
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function(data) {
field.val(data);
validationField.hide().empty();
setTimeout(function() {
validationField.append('<i class="fa fa-check"></i>');
validationField.show();
}, 500);
}
});
});
});
</script>
Este código está esperando a que se finalice de escribir algo en alguno de los campos del formulario usando el evento blur y, tras abandonar el mismo, pasando al siguiente campo o pulsando en cualquier otra parte de la pantalla se procede a realizar una llamada Ajax para actualizar la información del campo que se ha abandonado en la base de datos.
Si la actualización ha sido exitosa, rellenamos el campo abandonado con la información escrita, vaciamos el contenedor que muestra la validación ok para luego esperar medio segundo y rellenarlo de nuevo con un icono de ok en color verde.
Actualización en el servidor
En la llamada Ajax estamos indicando en la url el archivo process.php al que le estamos pasando 2 parámetros: el valor y el campo que queremos actualizar mediante el método POST.
El archivo process.php contiene lo siguiente:
<?php
include('config.php');
$data = $_POST['value'];
$field = $_POST['field'];
$update = 'UPDATE users3 SET '.$field.' = "'.$data.'" WHERE id_user=1';
$connexion->query($update);
echo $data;
?>
Donde vuelvo a incluir el archivo config.php para conectar con la base de datos, recupero el valor y el nombre del campo para actualizarlos en la base de datos. Mediante un echo retorno el valor para usarlo en el success del Ajax.
Es importante dejar claro que las tuplas o columnas de la base de datos tienen el mismo nombre que los inputs del formulario, haciendo el código más dinámico y adaptable para ser reutilizado.
Esta entrada ha sido actualizada el 09/08/2019.
Soy nuevo utilizando AJAX, recién lo estoy aprendiendo y me he encontrado con una dificultad. Tengo un listado en PHP que viene de una BD en MYSQL. Dentro de cada registro de la lista hay un formulario. Deseo enviar los datos y actualizar la BD con AJAX pero solo me funciona con el primer registro no refresca y va perfecto. Con el segundo en adelante ya no funciona, se me refresca y no realiza el código JS. Se que no tiene mucho que ver con tu ejemplo pero a ver si me puedes ayudar. Gracias.
Hola,
Necesitaríamos ver tu código en funcionamiento para ver que ocurre.
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte situado en:
https://www.jamodules.com/es/soporte
Allí lo analizamos y te damos una solución.
Saludos
Undefined index: id in C:\wamp64\www\crmblindfactory-v.1\logica\process.php on line 6
query($update);
echo $data;
?>
Alguna recomendación que me pueda dar?
Hola,
Revisa bien si está llegando la variable $id al archivo process.php
Saludos
Excelente. Funciona muy bien.
Yo ocupo Bootstrap 4.3
Gracias!!!
BUENOS DIAS QUE VERSION DE JQUERY ESTAS OCUPANDO
Hola,
En el caso del ejemplo una versión muy antigua; jQuery JavaScript Library v1.3.2
pero con las versiones actuales debería también funcionar.
Saludos
hola de donde saco el archivo jquery.js
Hola,
De la página oficial de jQuery:
https://jquery.com/download/
Saludos
logre que funcione mil gracias de verdad el script es muy bueno
si quieren el scrip funcionado con la base de datos les dejo mi facebook personal: https://www.facebook.com/german.apazaninaraqui
hola he probado y funciona muy bien solo que no puedo hacer que lo extraiga del input que tengo declarado como $codigo, no se si me explique, ejemplo tengo 3 registros con id (1,2 y 3) si especifico el numero 1 me actualiza el registro 1($update = «UPDATE `users` SET «.$field.» = ‘».$data.»‘ WHERE id =1″;) pero quiero que actualice segun el id que eliga sin tener que modificar la variable, en este caso declarado como $codigo….
query($update);
echo $data;
?>
$update = “UPDATE `users` SET “.$field.” = ‘”.$data.”‘ WHERE id =$codigo″;
Hola, no me funcionó lo copie tal cual, no hay manera de que me puedas pasar los archivos porfavor a mi correo josejosdan34@hotmail.com
Hola,
Nos puedes explicar que ocurre en tu sitio? Quizá alguien pueda ayudarte si lo vemos en linea.
Saludos
Hola ya lo solucione, hice algunas modificaciones, me imagino que fue por la version del php… gracias, resuelto
Hola me puedes ayudar, quiero enviar una variable mas, esta variable de igual forma tiene un valor en php, y quiero enviar esta variable para ponerla en el where y sea mas especifico mu query
Hola buenos días,
Para aprovechar el ejemplo y añadir una variable más deberás crear el div (con un identificador único) para tu nuevo input. Si se trata de algo que no es un campo lo puedes agregar a la variable dataString que podrás recoger en el archivo edit.php.
Saludos
Hola excelente trabajo tendrás algo parecido en pdo …saludos!
Hola!
Articulo muy bueno te felicito, solo tengo una gran duda, como puedo hacer que mi id de mi linea se vea afecta por ejemplo: este articulo lo tengo funcionando en el detalle de una venta, donde me actualizara la cantidad de artículos pero solo me funciona sí en mi clausula WHERE pongo ‘1’, pero si pongo una variable $id tomando mi post[‘id’], no me deja, me envía el error de que mi variable no esta definida…
Espero me puedas ayudar ya que esto me trae de cabeza…
Gracias!
Hola buenos días,
Me parece que debes debugar tu código para saber que está sucediendo. Una forma de debugar rápido es hacer echo de la query para saber que está llegando. Si no está definida, me temo que no está llegando y la deberás definir en el Javascript para pasarla al php con ajax.
Saludos
El código funcionó de maravillla, gracias. Sólo tuve que en el update a bd quitarle las comillas y los puntos al $field para que me cogiera el campo name…
Como se puede hacer con un Input Checkbox?
muchas gracias me sacó de un gran apuro. lo adapté a mis necesidades
Hola mi consulta es……si el campo que estoy editando tiene un id y quiero modificarlo por id como puedo lograr eso…si solo modifica por la condicion en donde es 1
Debes pasarle como parámetro dicho id y en el php armar la consulta para editar según el identificador recibido
Bueno… después de largas 3 horas de buscar y buscar la razón del por qué no funciona y que nuestro colaborador no deja archivos descargables para probar su funcionalidad puedo decir lo siguiente:
1. La versión JQUERY que usa es la v1.12.3
2. El SCRIPT que usa no es el que está posteado, para que lo vean pongan el siguiente texto en el campo de URL de un navegador firefox o chrome «view-source:http://www.jose-aguilar.com/scripts/jquery/edit-in-line/»
3. La nomenclatura PHP está antigua para las nuevas versiones. Si alguien desea, le puedo pasar los ejecutables del ejemplo, solamente que debe cambiar las sintaxis para mysql porque yo lo hice con postgres.
Buenos días,
Posdrías pasarme los ejecutables?
Buenos días, no consigo que me actualice la base datos.
El codigo lo tengo exactamente como en el ejemplo:
query($update);
echo $data;
?>
¿Alguna idea?
Un saludo.
Hola buenas tardes,
Tendrás que debugar las consultas que haces y revisar si es correcto. Haz un echo de $update para ver como forma la consulta y ejecútala en la base de datos para revisar si funciona. Ese sería un primer paso para ver si funciona.
Saludos
Buena tarde, excelente ejemplo, podrías incluir para buscar la información a modificar
si vana enseñar digo estaría bien que pongan el código o digo si lo vana a poner en el articulo cuando menos pongan lo completo
Hola, tengo el mismo error que una de las personas de arriba, en el edit.php me sale el error en los values, tengo la BD conectada y todo, pero eso me causa problemas
$data = $_POST[‘value’];
$field = $_POST[‘value’];
necesito salir de ese problema, Gracias.
HOla,
Revisando el código puede ser que se deba cambiar lo siguiente:
$field = $_POST[‘value’];
POr:
$field = $_POST[‘field’];
El archivo edit.php no me funciona he probadop poner solo un campo y me sale este error :
Fatal error: Undefined constant ‘��precio\�’ in /home/plorperu/public_html/A/edit.php on line 4
Hola,
Por lo que indica el error no está definida una constante llamada precio. En la demostración no vemos ninguna constante con este nombre. Debe ser algun añadido suyo que debe declarar previamente.
Saludos
nada no se que pasa que se come la mitad de lo que escribo
queria decir como indicas al comienzo del tutorial vaue =row[‘name’]
los input
input type=»text» id=»nombre» name=»nombre» value=»gonzalo»
input type=»text» id=»apellidos» name=»apellidos» value=»caracas»
Son así o deberian de ser
input type=»text» id=»nombre» name=»nombre» value=»» />» en mi caso » />
y mi UPDATE
«UPDATE `ficha` SET `'».$field.»‘`='».$data.»‘ WHERE id=1″;
¿que hago mal o que me falta?
nada no sube,
mi conexion a la base de datos
new mysqli(«localhost», «jghsistemas», «Javivi1973», «revisiones»);
No se porque no sale entero, vuelvo a colocarlo con carracteres // a ver si sale bien:
edit.php
//query($update);//
//echo $data;//
//?>//
Perdona te coloco de nuevo mis archivos ya que no han subido bien
edit.php
«query($update);
echo $data;
?>»
y el html
personal.html
»
Edit in line con jQuery, Ajax y PHP
#content {
float:left;
width:700px;
margin-top:20px;
border:1px solid #CCCCCC;
padding:10px;
}
.input {
float:left;
width:95%;
}
label {
background: none repeat scroll 0 0 #F3F3F3;
display: block;
float: left;
font-size: 13px;
font-weight: bold;
height: 24px;
margin: 0 10px 0 0;
padding: 3px 7px;
width: 150px;
}
input, textarea {
background-color: #F3F3F3;
border: 1px solid #CCCCCC;
height: 16px;
padding: 7px;
width: 435px;
margin-bottom:15px;
float:left;
}
textarea {
height:48px;
}
.loader, .ok {
float: right;
/*margin-right:50px;*/
}
$(document).ready(function(){
$(‘input’).focus(function() {
$(this).css(‘background-color’,’#ffffff’);
});
$(‘input’).blur(function(){
var field = $(this);
var parent = field.parent().attr(‘id’);
field.css(‘background-color’,’#F3F3F3′);
if($(‘#’+parent).find(«.ok»).length){
$(‘#’+parent+’ .ok’).remove();
$(‘#’+parent+’ .loader’).remove();
$(‘#’+parent).append(»).fadeIn(‘slow’);
}else{
$(‘#’+parent).append(»).fadeIn(‘slow’);
}
var dataString = ‘value=’+$(this).val()+’&field=’+$(this).attr(‘name’);
$.ajax({
type: «POST»,
url: «edit.php»,
data: dataString,
success: function(data) {
field.val(data);
$(‘#’+parent+’ .loader’).fadeOut(function(){
$(‘#’+parent).append(»).fadeIn(‘slow’);
});
}
});
});
$(‘textarea’).blur(function(){
var field = $(this);
var parent = field.parent().attr(‘id’);
field.css(‘background-color’,’#F3F3F3′);
//alert(parent);
$(‘#’+parent).append(»).fadeIn(‘slow’);
var dataString = ‘value=’+$(this).val()+’&field=’+$(this).attr(‘name’);
$.ajax({
type: «POST»,
url: «edit.php»,
data: dataString,
success: function(data) {
field.val(data);
$(‘#’+parent+’ .loader’).fadeOut(function(){
$(‘#’+parent).append(»).fadeIn(‘slow’);
});
}
});
});
});
Editar los campos en el sitio o lugar haciendo click
Nombre
Apellidos
»
Como te comentaba me da error el archivo edit.php
«Notice: Undefined index: value in C:\wamp\www\revisiones\edit.php on line 3»
«Notice: Undefined index: value in C:\wamp\www\revisiones\edit.php on line 4»
Estas lineas son:
«$data = $_POST[‘value’];»
«$field = $_POST[‘value’];»
Perdona mi torpeza, pero no me funciona y me interesa muchisimo. Tengo una base de datos local con un usuario llamado «jghsistemas» y contraseña «1234» la BD se llamada «ficha» con una tabla llamada «user» y 3 campos «id» «nombre» «apellidos»
mi arhivo edit.php queda de la siguiente manera:
edit.php
query($update);
echo $data;
?>
y el html al que he llamado personal.html seria:
personal.html
Edit in line con jQuery, Ajax y PHP
#content {
float:left;
width:700px;
margin-top:20px;
border:1px solid #CCCCCC;
padding:10px;
}
.input {
float:left;
width:95%;
}
label {
background: none repeat scroll 0 0 #F3F3F3;
display: block;
float: left;
font-size: 13px;
font-weight: bold;
height: 24px;
margin: 0 10px 0 0;
padding: 3px 7px;
width: 150px;
}
input, textarea {
background-color: #F3F3F3;
border: 1px solid #CCCCCC;
height: 16px;
padding: 7px;
width: 435px;
margin-bottom:15px;
float:left;
}
textarea {
height:48px;
}
.loader, .ok {
float: right;
/*margin-right:50px;*/
}
$(document).ready(function(){
$(‘input’).focus(function() {
$(this).css(‘background-color’,’#ffffff’);
});
$(‘input’).blur(function(){
var field = $(this);
var parent = field.parent().attr(‘id’);
field.css(‘background-color’,’#F3F3F3′);
if($(‘#’+parent).find(«.ok»).length){
$(‘#’+parent+’ .ok’).remove();
$(‘#’+parent+’ .loader’).remove();
$(‘#’+parent).append(»).fadeIn(‘slow’);
}else{
$(‘#’+parent).append(»).fadeIn(‘slow’);
}
var dataString = ‘value=’+$(this).val()+’&field=’+$(this).attr(‘name’);
$.ajax({
type: «POST»,
url: «edit.php»,
data: dataString,
success: function(data) {
field.val(data);
$(‘#’+parent+’ .loader’).fadeOut(function(){
$(‘#’+parent).append(»).fadeIn(‘slow’);
});
}
});
});
$(‘textarea’).blur(function(){
var field = $(this);
var parent = field.parent().attr(‘id’);
field.css(‘background-color’,’#F3F3F3′);
//alert(parent);
$(‘#’+parent).append(»).fadeIn(‘slow’);
var dataString = ‘value=’+$(this).val()+’&field=’+$(this).attr(‘name’);
$.ajax({
type: «POST»,
url: «edit.php»,
data: dataString,
success: function(data) {
field.val(data);
$(‘#’+parent+’ .loader’).fadeOut(function(){
$(‘#’+parent).append(»).fadeIn(‘slow’);
});
}
});
});
});
Editar los campos en el sitio o lugar haciendo click
Nombre
Apellidos
En el input del formlario ¿el value tiene que ser el que indicas value=»» o puede ser cualquier texto que luego se reemplazara cuando se modifique en la web como por ejemplo value=»javi» ? ¿en mi caso debería ser value=»» ?
He probado todas las combinaciones y no me funciona, de da error el archivo edit.php
Notice: Undefined index: value in C:\wamp\www\revisiones\edit.php on line 3
Notice: Undefined index: value in C:\wamp\www\revisiones\edit.php on line 4
que corresponde con
$data = $_POST[‘value’];
$field = $_POST[‘value’];
Te agradecería muchisimo que me ayudaras a que funcione.
Hola estoy muy interesado en este código pero no soy capaz de hacerlo funcionar. Por favor podrías poner el código de la base de datos haber si encuentro porque no me funciona?
El código que actualiza los registros está implícito en el artículo, lo que hay en el archivo edit.php.
En este archivo estoy conectando con la base de datos y realizando la actualización con el UPDATE.
Estos parámetros DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE se tiene que cambiar por los de tu base de datos y además el UPDATE se tiene que corresponder con la tabla y campos de tu base de datos.
Posiblemente te pueda interesar como interactuar con una base de datos utilizando mysqli
Hola, me ha venido genial tu tutorial… de hecho ya lo he implementado y adaptado y ya puedo actualizar la base de datos. Sin embargo lo que me falla es el fade out del icono de cargando y el fade in de la validación. he buscado pero no he encontrado ninguna solución, alguna idea?
un saludo
Andrea
muy bueno pero como pasas el id del registro que va a modificar??
El id del registro podría ser un input type hidden y en el value del mismo añades un value con el id del registro.
podrías mostrarme ejemplo de como seria esa parte del código con el id.
buen día exelentes tutoriales solo que no se si se pudiera poner la version de jquery que ocupa en cada ejemplo.
Saludos
buen dia noes pre sisa mente el tema estoy buscando una manera de ejecutar un php des de un javas crip no se mucho de esto
y lo hice de ecta manera
esta es la fun cion que itilizo
<script language=\\"javascript\\">
<!–
function testC(cb,ID) {
open(\\"guarda.php?testaC=\\"+cb.checked+\\"&ID=\\"+ID,true);
close();
}
//–>
</script>
todo se ejecuta bien pero obia mente noe completamente en el backgroud me genera un pestañeo he probado con
function FirmaC(cb,ID) {
<iframe style=\\\’hidden\\\’ name=\\\’hiddenframe\\\’ onLoad=\\\’getURL()\\\’> </iframe>
var urls = \\"guarda.php?FirmaC=\\"+cb.checked+\\"&ID=\\"+ID\\"
var pos = 0
function getURL() {
top.hiddenframe.location.href = urls
pos++
}> </iframe>
}
pro no ha fun cionado al igual que con
buen dia noes pre sisa mente el tema estoy buscando una manera de ejecutar un php des de un javas crip no se mucho de esto
y lo hice de ecta manera
esta es la fun cion que itilizo
<script language=\"javascript\">
<!–
function testC(cb,ID) {
open(\"guarda.php?testaC=\"+cb.checked+\"&ID=\"+ID,true);
close();
}
//–>
</script>
todo se ejecuta bien pero obia mente noe completamente en el backgroud me genera un pestañeo he probado con
function FirmaC(cb,ID) {
<iframe style=\’hidden\’ name=\’hiddenframe\’ onLoad=\’getURL()\’> </iframe>
var urls = \"guarda.php?FirmaC=\"+cb.checked+\"&ID=\"+ID\"
var pos = 0
function getURL() {
top.hiddenframe.location.href = urls
pos++
}> </iframe>
}
pro no ha fun cionado al igual que con
buen dia noes pre sisa mente el tema estoy buscando una manera de ejecutar un php des de un javas crip no se mucho de esto
y lo hice de ecta manera
esta es la fun cion que itilizo
todo se ejecuta bien pero obia mente noe completamente en el backgroud me genera un pestañeo he probado con
function FirmaC(cb,ID) {
var urls = «guarda.php?FirmaC=»+cb.checked+»&ID=»+ID»
var pos = 0
function getURL() {
top.hiddenframe.location.href = urls
pos++
}>
}
pro no ha fun cionado al igual que con
intenta pensarlo al revés. Con las tecnologias jquery ajax y php
Me temo que hay un error en el código del fichero edit.php
donde dice:
$data = $_POST[\’value\’];
$field = $_POST[\’value\’];
debería decir:
$data = $_POST[\’value\’];
$field = $_POST[\’field\’];
Si no es así nunca funcionará la actualización de registros en la base de datos.
Por otra parte sería conveniente actualizar las etiquetas PHP que aparecen en los campos del formulario porque son muy antiguas y no funcionarán con las nuevas versiones de PHP:
<?=$row[\’name\’]?> debería de ser: <?php echo $row[\’name\’]?>
un saludo
Excelente ejemplo muy buen trabajo.. me podrias ayudar a hacer lo mismo pero en la consulta digamos extraigo todos los datos y los pongo en forma de tabla y editarlos con un edit in place por ejemplo jeditable .
Gracias.
Donde puedo descargar el codigo?
El código está en el artículo. Solo tienes que seguir los pasos para implementarlo
Esta muy bueno e interesante, pero como se podria validar el correo electronico, pues si pones cualquier cosa lo acepta, seria bueno de validara y que te obligara a ponerle un correo correcto
Hola, no es el objetivo del tutorial pero para validar el email con jQuery disponemos de otro tutorial:
http://www.jose-aguilar.com/blog/validar-email-con-jquery/
Espero te sirva,
Saludos
y donde podria bajar el codigo para probalrlo localmente