Estoy tratando de llenar un input a partir del dato que introducen en otro input. El problema es que no lo realiza y desconozco el por qué no funciona.
Este es el código HTML que estoy empleando para la factura:
<form name="guardar_item" id="guardar_item">
<!-- Modal -->
<div id="agregar" class="modal">
<div class="modal-content center">
<h4>Nuevo ítem</h4><br>
<div class="row">
<div class="row">
<div class="input-field col s12 m12 l12">
<i class="material-icons prefix"></i>
<input type="text" id="descripcion" name="descripcion">
<label for="descripcion" class="white-text" style="cursor: pointer;">Descripción del producto</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m4 l4">
<i class="material-icons prefix"></i>
<input type="number" id="material" name="material" class="white-text" style="border-bottom: 1px solid white;cursor: pointer;" required>
<label for="material" class="white-text" style="cursor: pointer;">Material</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m4 l4">
<i class="material-icons prefix"></i>
<input type="number" id="cantidad" name="cantidad" class="white-text" style="border-bottom: 1px solid white;cursor: pointer;" required>
<label for="cantidad" class="white-text" style="cursor: pointer;">Cantidad</label>
</div>
<div class="input-field col s12 m4 l4">
<i class="material-icons prefix"></i>
<input type="number" step=".01" id="precio" name="precio" class="white-text" style="border-bottom: 1px solid white;cursor: pointer;" required>
<label for="precio" class="white-text" style="cursor: pointer;">Costo unitario</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-light btn red darken-2">Cancelar</a>
<button type="submit" class="btn btn-info" >Guardar</button>
</div>
</div>
</form>
<?php include('templates/footer.php');?>
<script>
document.getElementById("material").onchange = function(){alerta()};
function alerta() {
// Creando el objeto para hacer el request
var request = new XMLHttpRequest();
request.responseType = 'json';
// Objeto PHP que consultaremos
request.open("POST", "productos.php");
// Definiendo el listener
request.onreadystatechange = function() {
// Revision si fue completada la peticion y si fue exitosa
if(this.readyState === 4 && this.status === 200) {
// Ingresando la respuesta obtenida del PHP
document.getElementById("descripcion").value = this.response.nombre;
//document.getElementById("dir").value = this.response.dir;
}
};
}
</script>
Y este es el código PHP que tengo para realizar la consulta:
<?php
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$material = $_POST["material"];
/* Connect To Database*/
require("config/db.php");//Contiene las variables de configuracion para conectar a la base de datos
require("config/conexion.php");//Contiene funcion que conecta a la base de datos
$sqlprod = "SELECT descripcion FROM factura_productos WHERE material = '$material'";
$resultado = $mysqli->query($sqlprod);
$dato = $resultado->fetch_assoc();
$descripcion = $dato['descripcion'];
//$dir = $dato['d_est'];
echo json_encode([
'descripcion' => $descripcion
]);
}
else {
echo "No se encontro el producto en la base de datos.";
}
?>
Actualmente no me aparece siquiera el echo
que tengo en el else
dentro del código de PHP, añado que tampoco me devuelve ningún error. Desconozco si por estar dentro de un modal es que no está entendiendo lo que trato de hacer. Agradecería cualquier ayuda que puedan brindarme para orientarme.
console.log
o conalert
dentro de tu funciónalerta()
para verificar si el código está funcionando en esa parte, que los datos se recogen correctamente, etc. Una vez verificado eso, si sigue sin funcionar, podrás pasar a verificar el código de servidor (PHP). Es un caso ABC de depuración que deberías aprender a poner en práctica, así te ahorrarás muchas horas rompiéndote el coco.