estoy haciendo un pequeño proyecto y mi problema es el siguiente, necesito que cuando se este digitando en un input con id="dni" se digite por ejemplo 70555478, en tiempo real los input id="nombres_apellidos", el input id="grado", el input id="num_orden", el input id="idestudiante", automáticamente se llenen con los valores respectivos a la búsqueda en mi DB, y también que una vez mostrados los datos en los input, los guarde de forma automática en una tabla asistencia en la que tengo el idestudiante, nombres, edad, fecha, hora, he estado buscando por varios lugares y no encuentro, soy un poco inexperto en javascript y ajax y php, espero me haya explicado y puedan ayudarme.
Este es mi formulario en donde se deben mostrar los datos en tiempo real en los input que les he mencionado los input y mi javascript están en el archivo index.php:
<div class="formulario">
<form class="row g-3" >
<!--Campo Documento-->
<div class="form-group col-lg-4 col-md-3 col-sm-4 col-xs-12">
<label>Documento</label>
<input type="text" name="dni" class="form-control dni1" id="dni" maxlength="8" minlength="8" pattern=".{8,}" onkeydown="buscar_datos();">
</div>
<!--Campo Nombre-->
<div class="form-group col-lg-8 col-md-3 col-sm-3 col-xs-12">
<label>Nombre </label>
<input type="text" name="nombres_apellidos" class="form-control" id="nombres_apellidos">
</div>
<!--Campo grado-->
<div class="form-group col-lg-5 col-md-3 col-sm-3 col-xs-12">
<label>Grado </label>
<input type="text" name="grado" class="form-control" id="grado">
</div>
<!--Campo numero de orden-->
<div class="form-group col-lg-5 col-md-3 col-sm-3 col-xs-12">
<label>Num Orden </label>
<input type="text" name="num_orden" class="form-control" id="num_orden">
</div>
<!--Campo numero de orden-->
</form>
</div>
este es mi formulario donde tengo el input id="idestudiante", input id="fecha", input id="hora", los cuales quiero que cuando logre mostrar los datos del estudiante, se guarde en mi tabla asistencia automáticamente sin necesidad de hacer un click en el botón guardar
<div class="card-body">
<form class="row g-3" name="form_reloj">
<div class="form-group col-lg-5 col-md-4 col-sm-4 col-xs-12">
<label>ID DE ESTUDIANTE</label>
<input class="form-control" type="text" name="idestudiante" id="idestudiante" tabindex="1" required/>
</div>
<div class="form-group col-lg-5 col-md-4 col-sm-4 col-xs-12">
<label>Fecha actual</label>
<input class="form-control" type="text" name="fecha_hora" id="fecha_hora" tabindex="1" required />
</div>
<div class="form-group col-lg-4 col-md-3 col-sm-3 col-xs-12">
<label>Hora actual</label>
<input class="form-control" id="nombre" type="text" name="reloj" disabled>
</div>
<div class="form-group col-lg-3 col-md-3 col-sm-3 col-xs-12">
<label>Día</label>
<input type="text" class="form-control" id="dia" disabled>
</div>
<!--Botones-->
<center>
<input type="button" value="GUARDAR" class="btn btn-success" name="btn_enviar" onclick="guardar();">
<input type="button" value="CANCELAR" class="btn btn-danger" name="btn_cancelar" onclick="limpiar();">
</center>
</form>
</div>
aquí coloco mi código de java para que lo puedan revisar, les hago recordar que todo esta en mi index.php:
<script type="text/javascript">
$(document).ready(function(){
$('.cargando').hide();
});
function buscar_datos()
{
dni = $("#dni").val();
var parametros =
{
"buscar": "1",
"dni" : dni
};
$.ajax(
{
data: parametros,
dataType: 'json',
url: 'formu-registro/codigos_php.php',
type: 'post',
beforeSend: function()
{
$('.formulario').hide();
$('.cargando').show();
},
error: function()
{alert("Error");},
complete: function()
{
$('.formulario').show();
$('.cargando').hide();
$('.dni1').show('500'); //mostrar
},
success: function (valores)
{
if(valores.existe=="1")
{
$("#nombres_apellidos").val(valores.nombres_apellidos);
$("#num_orden").val(valores.num_orden);
$("#grado").val(valores.grado);
}
else
{
alert("El propietario no existe, ¡Crealo!")
}
}
})
}
function limpiar()
{
$("#dni").val("");
$("#nombres_apellidos").val("");
$("#num_orden").val("");
$("#grado").val("");
}
function guardar()
{
var parametros =
{
"guardar": "1",
"dni" : $("#dni").val(),
"nombres_apellidos" : $("#nombres_apellidos").val(),
"num_orden" : $("#num_orden").val(),
"grado" : $("#grado").val()
};
$.ajax(
{
data: parametros,
url: 'formu-registro/codigos_php.php',
type: 'post',
beforeSend: function()
{
$('.formulario').hide();
$('.cargando').show();
},
error: function()
{alert("Error");},
complete: function()
{
$('.formulario').show();
$('.cargando').hide();
},
success: function (mensaje)
{$('.resultados').html(mensaje);}
})
limpiar();
}
</script>
QUIERO RECALCAR QUE LOS INPUTS Y MI CODIGO JAVASCRIPT ESTAN TODOS EN UN ARCHIVO CON NOMBRE index.php:
mi código de conexión a la DB esta con el nombre abrir_conexion.php:
<?php
// Parametros a configurar para la conexion de la base de datos
$host = "localhost"; // sera el valor de nuestra BD
$basededatos = "dbjba"; // sera el valor de nuestra BD
$usuariodb = "usasistencia"; // sera el valor de nuestra BD
$clavedb = ""; // sera el valor de nuestra BD
//Lista de Tablas
$tabla_db1 = "estudiantes"; // tabla de usuarios
//Lista de Tablas
$tabla_db2 = "reg_asistencia"; // tabla de usuarios
//error_reporting(0); //No me muestra errores
$conexion = new mysqli($host,$usuariodb,$clavedb,$basededatos);
if ($conexion->connect_errno) {
echo "Nuestro sitio experimenta fallos....";
exit();
}
?>
y mi archivo codigos_php.php
<?php
include("bd/abrir_conexion.php");
if(isset($_POST['buscar']))
{
$dni = $_POST['dni'];
$valores = array();
$valores['existe'] = "0";
//CONSULTAR
$resultados = mysqli_query($conexion,"SELECT * FROM $tabla_db1 WHERE num_documento = '$dni'");
while($consulta = mysqli_fetch_array($resultados))
{
$valores['existe'] = "1"; //Esta variable no la usamos en el vídeo (se me olvido, lo siento xD). Aqui la uso en la linea 97 de registro.php
$valores['nombres_apellidos'] = $consulta['nombres_apellidos'];
$valores['num_orden'] = $consulta['num_orden'];
$valores['grado'] = $consulta['grado'];
}
sleep(1);
$valores = json_encode($valores);
echo $valores;
}
if(isset($_POST['guardar']))
{
$dni = $_POST['dni'];
$nombres_apellidos = $_POST['nombres_apellidos'];
$num_orden = $_POST['num_orden'];
$grado = $_POST['grado'];
$existe = "0";
//CONSULTAR
$resultados = mysqli_query($conexion,"SELECT * FROM $tabla_db1 WHERE dni = '$dni'");
while($consulta = mysqli_fetch_array($resultados))
{
$existe = "1";
}
if($existe=="1")
{
//crear uno nuevo
mysqli_query($conexion, "INSERT INTO $tabla_db2
(idestudiante,fecha,hora,dia)
values
('$idestudiante','$fecha','$hora','$dia')");
echo "Propietario Agregado";
}
}
include("bd/cerrar_conexion.php"); ?>
espero puedan ayudarme gracias a todos
