1

Les cuento lo siguiente tengo un formulario donde el primer campo se llama NIT, cuando el usuario digita el numero, mediante JS se hace una consulta mysql y si encuentra el registro regresa los resultados y automaticamente rellena los otros dos imputs nombre y direccion.

El codigo que tengo funciona bien, solo que en ves de traerme el dato de nombre al imput nombre, me arrastra al input tanto el nombre como la direccion y asi pasa tambien en el imput de direccion, arrastra el dato del nombre y direccion, como no se ada de JS acudo a ustedes para que me ayuden por favor a verificar donde tengo el error.

dejo los codigos para ver si me pueden ayudar, de antemano gracias.

este es el form.html

<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST</title>

</head>
<body>
    <form id="myForm">
        <label>RUT:</label>
        <div><input type="text" id="nit" name="n_nit"></div>
        <br>
        <label>NOMBRE:</label>
        <div><input type="text" id="nombre" name="nombre"></div>
        <br>
        <label>direccion:</label>
        <div><input type="text" id="dir" name="dir"></div>

    </form>

    <script>
    document.getElementById("nit").onchange = function(){alerta()};
    function alerta() {
        // Creando el objeto para hacer el request
        var request = new XMLHttpRequest();

        // Objeto PHP que consultaremos
        request.open("POST", "services.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("nombre").value = this.responseText;
                document.getElementById("dir").value = this.responseText;
            }
        };

        // Recogiendo la data del HTML
        var myForm = document.getElementById("myForm");
        var formData = new FormData(myForm);

        // Enviando la data al PHP
        request.send(formData);
    }
</script>
</body>
</html>

este es el services.php

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $NIT = htmlspecialchars(trim($_POST["n_nit"]));

    // Codigo para buscar en tu base de datos acá


    require 'conexion.php';

    $sqlsi = "SELECT * FROM gcs WHERE n_nit = '$NIT'";
    $resultado = $mysqli->query($sqlsi);
    $dato = $resultado->fetch_assoc();


    $nombre = $dato['n_est'];
    echo $nombre;
    $dir = $dato['d_est'];
    echo $dir;


} else {
    echo "<p>No se encontro el nombre en la DB!!</p>";
}
?>

2 respuestas 2

1

gracias a la ayuda de @crrlos y de @quevedo logre solucionar el tema, dejo el codigo completo por si lo requiere alguien mas..

formulario.html


<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST</title>

</head>
<body>
    <form id="myForm">
        <label>RUT:</label>
        <div><input type="text" id="nit" name="n_nit"></div>
        <br>
        <label>NOMBRE:</label>
        <div><input type="text" id="nombre" name="nombre"></div>
        <br>
        <label>direccion:</label>
        <div><input type="text" id="dir" name="dir"></div>

    </form>

    <script>
    document.getElementById("nit").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", "services.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("nombre").value = this.response.nombre;
                document.getElementById("dir").value = this.response.dir;
            }
        };

        // Recogiendo la data del HTML
        var myForm = document.getElementById("myForm");
        var formData = new FormData(myForm);

        // Enviando la data al PHP
        request.send(formData);
    }
</script>
</body>
</html>

services.php

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $NIT = htmlspecialchars(trim($_POST["n_nit"]));

    // Codigo para buscar en tu base de datos acá


    require 'conexion.php';

    $sqlsi = "SELECT * FROM gcs WHERE n_nit = '$NIT'";
    $resultado = $mysqli->query($sqlsi);
    $dato = $resultado->fetch_assoc();



$nombre = $dato['n_est'];
$dir = $dato['d_est'];

echo json_encode([
   'nombre' => $nombre,
   'dir'    => $dir
]);





} else {
    echo "<p>No se encontro el nombre en la DB!!</p>";
}
?>

Y por si lo quieren ver en funcionamiento esta dispuesto en este hosting temporal https://pruebasdcpb.000webhostapp.com/

Gracias Amigos de la comunidad Stack overflow

0

El error está en que a ambos campos les asignas la respuesta completa:

document.getElementById("nombre").value = this.responseText;
document.getElementById("dir").value = this.responseText;

Tienes que separar para cada uno el valor que le corresponde.

Si tu respuesta es un json podría corregirse así:

document.getElementById("nombre").value = respuestaJson.nombre;
document.getElementById("dir").value = respuestaJson.dir;

Actualización (observación hecha por @quevedo):

Puedes reemplazar el código:

$nombre = $dato['n_est'];
echo $nombre;
$dir = $dato['d_est'];
echo $dir;

por:

$nombre = $dato['n_est'];
$dir = $dato['d_est'];

echo json_encode([
   'nombre' => $nombre,
   'dir'    => $dir
]);

eso debería dar una salida en formato json, compatible con la solución que te propuse.

Actualización, configurar la petición para recibir respuesta json:

Agrega el responseType a la configuración de la petición:

var request = new XMLHttpRequest();
request.responseType = 'json';

Y para leer los valores en lugar de responseText usa response:

document.getElementById("nombre").value = this.response.nombre;
document.getElementById("dir").value = this.response.dir;
11
  • Hola, gracias por responder tan pronto, trate de implementar lo que tu me sugeriste pero sigue llevando los valores completos al input, alguna otra idea? Commented el 29 mar. 2020 a las 16:41
  • Cuál es el formato de la respuesta? Haz un console.log(this.responseText) para ver que te imprime en consola y agrégalo en la pregunta.
    – Lobos
    Commented el 29 mar. 2020 a las 16:42
  • 1
    @CamiloKent estas enviando secuencialmente dos valores que son tomados sin identificadores en el objeto this.responseText Debes preparar la salida, antes de enviarla y devolverla con un solo echo, usando un formato que puedas manejar, o enviar una marca separadora intermedia que puedas reconocer al procesar la respuesta.
    – quevedo
    Commented el 29 mar. 2020 a las 16:54
  • hola, gracias por su ayuda, implemente las obervaciones hechas por uds preparando la salida con echo json_encode($dato); y recogiendo los datos con document.getElementById("nombre").value = this.responseText.n_est; document.getElementById("dir").value = this.responseText.d_est; el problema es que ahora en los inputs no solo trae la info de n_est y d_est sino de toda la tabla completa en este formato: {"gcs_id":"1",, alguna idea? Commented el 29 mar. 2020 a las 17:19
  • Ya actualicé la respuesta. Ahora en lugar de this.responseText.n_est usa this.responseText.nombre, lo mismo para d_est cambialo por dir
    – Lobos
    Commented el 29 mar. 2020 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.