Llenado de inputs heredando de otro input

Question

Estoy tratando de hacer un autocompletado ingresando solo el ID del cliente, vi un ejemplo y quise practicarlo para poder entenderl, solo que al momento de querer correrlo en la consola de FireFox me aparece el siguiente mensaje

La codificación de caracteres del documento HTML no fue declarada. El documento se mostrará con texto "basura" en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia.

SyntaxError: expected expression, got '<' rellena.html 2 (Llinea)

mi base de datos de ejemplo qu estoy usando es la siguiente

create table ajax_client(
    clientID int not null primary key,
    firstname varchar(255),
    lastname varchar(255),
    address varchautoar(255),
    zipCode varchar(15),
    city varchar(128),
    country varchar(64));


insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1001','John','Alastname','Queens street 15','4000','STAVANGER','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1002','Mary','Something','Kings square 10','4070','RANDABERG','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1003','Peter','Jensen','Main road','5000','BERGEN','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1004','Laura','Olsson','','7000','TRONDHEIM','NORWAY');autoauto

mi fichero de rellena.html es el siguiente

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

    fieldset{
        width:500px;
        margin-left:10px;
    }

    </style>
    <script type="text/javascript" src="ajax/ajax.js"></script>
    <script type="text/javascript">
    var ajax = new sack();
    var currentClientID=false;
    function getClientData()
    {
        var clientId = document.getElementById('clientID').value.replace(/[^0-9]/g,'');
        if(clientId.length==4 && clientId!=currentClientID){
            currentClientID = clientId
            ajax.requestFile = 'getClient.php?getClientId='+clientId;   // Specifying which file to get
            ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
            ajax.runAJAX();     // Execute AJAX function            
        }

    }

    function showClientData()
    {
        var formObj = document.forms['clientForm']; 
        eval(ajax.response);
    }


    function initFormEvents()
    {
        document.getElementById('clientID').onblur = getClientData;
        document.getElementById('clientID').focus();
    }


    window.onload = initFormEvents;
    </script>
</head>
<body>

    <form name="clientForm" action="rellena.html" method="post">    
    <fieldset>
        <legend>Client information</legend>
        <table>
            <tr>
                <td><label for="clientID">Client ID:</label></td>
                <td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
            </tr>
            <tr>
                <td><label for="firstname">First name:</label></td>
                <td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
            </tr>
            <tr>
                <td><label for="lastname">Last name:</label></td>
                <td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
            </tr>
            <tr>
                <td><label for="address">Address:</label></td>
                <td><input name="address" id="address" size="20" maxlength="255"></td>
            </tr>
            <tr>
                <td><label for="zipCode">Zipcode:</label></td>
                <td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
            </tr>
            <tr>
                <td><label for="city">City:</label></td>
                <td><input name="city" id="city" size="20" maxlength="255"></td>
            </tr>
            <tr>
                <td><label for="country">Country:</label></td>
                <td><input name="country" id="country" size="20" maxlength="255"></td>
            </tr>
        </table>    
    </form>
    </fieldset>

</body>
</html>

mi fichero de getClient.php

<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect("localhost","root","");  
mysql_select_db("auto",$connection);

if(isset($_GET['getClientId'])){  
  $res = mysql_query("select * from ajax_client where clientID='".$_GET['getClientId']."'") or die(mysql_error());
  if($inf = mysql_fetch_array($res)){
    echo "formObj.firstname.value = '".$inf["firstname"]."';\n";    
    echo "formObj.lastname.value = '".$inf["lastname"]."';\n";    
    echo "formObj.address.value = '".$inf["address"]."';\n";    
    echo "formObj.zipCode.value = '".$inf["zipCode"]."';\n";    
    echo "formObj.city.value = '".$inf["city"]."';\n";    
    echo "formObj.country.value = '".$inf["country"]."';\n";    

  }else{
    echo "formObj.firstname.value = '';\n";    
    echo "formObj.lastname.value = '';\n";    
    echo "formObj.address.value = '';\n";    
    echo "formObj.zipCode.value = '';\n";    
    echo "formObj.city.value = '';\n";    
    echo "formObj.country.value = '';\n";      
  }    
}
?>

y mi fichero de ajax.js

function sack(file) {
    this.xmlhttp = null;

    this.resetData = function() {
        this.method = "POST";
        this.queryStringSeparator = "?";
        this.argumentSeparator = "&";
        this.URLString = "";
        this.encodeURIString = true;
        this.execute = false;
        this.element = null;
        this.elementObj = null;
        this.requestFile = file;
        this.vars = new Object();
        this.responseStatus = new Array(2);
    };

    this.resetFunctions = function() {
        this.onLoading = function() { };
        this.onLoaded = function() { };
        this.onInteractive = function() { };
        this.onCompletion = function() { };
        this.onError = function() { };
        this.onFail = function() { };
    };

    this.reset = function() {
        this.resetFunctions();
        this.resetData();
    };

    this.createAJAX = function() {
        try {
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                this.xmlhttp = null;
            }
        }

        if (! this.xmlhttp) {
            if (typeof XMLHttpRequest != "undefined") {
                this.xmlhttp = new XMLHttpRequest();
            } else {
                this.failed = true;
            }
        }
    };

    this.setVar = function(name, value){
        this.vars[name] = Array(value, false);
    };

    this.encVar = function(name, value, returnvars) {
        if (true == returnvars) {
            return Array(encodeURIComponent(name), encodeURIComponent(value));
        } else {
            this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
        }
    }

    this.processURLString = function(string, encode) {
        encoded = encodeURIComponent(this.argumentSeparator);
        regexp = new RegExp(this.argumentSeparator + "|" + encoded);
        varArray = string.split(regexp);
        for (i = 0; i < varArray.length; i++){
            urlVars = varArray[i].split("=");
            if (true == encode){
                this.encVar(urlVars[0], urlVars[1]);
            } else {
                this.setVar(urlVars[0], urlVars[1]);
            }
        }
    }

    this.createURLString = function(urlstring) {
        if (this.encodeURIString && this.URLString.length) {
            this.processURLString(this.URLString, true);
        }

        if (urlstring) {
            if (this.URLString.length) {
                this.URLString += this.argumentSeparator + urlstring;
            } else {
                this.URLString = urlstring;
            }
        }

        // prevents caching of URLString
        this.setVar("rndval", new Date().getTime());

        urlstringtemp = new Array();
        for (key in this.vars) {
            if (false == this.vars[key][1] && true == this.encodeURIString) {
                encoded = this.encVar(key, this.vars[key][0], true);
                delete this.vars[key];
                this.vars[encoded[0]] = Array(encoded[1], true);
                key = encoded[0];
            }

            urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
        }
        if (urlstring){
            this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
        } else {
            this.URLString += urlstringtemp.join(this.argumentSeparator);
        }
    }

    this.runResponse = function() {
        eval(this.response);
    }

    this.runAJAX = function(urlstring) {
        if (this.failed) {
            this.onFail();
        } else {
            this.createURLString(urlstring);
            if (this.element) {
                this.elementObj = document.getElementById(this.element);
            }
            if (this.xmlhttp) {
                var self = this;
                if (this.method == "GET") {
                    totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
                    this.xmlhttp.open(this.method, totalurlstring, true);
                } else {
                    this.xmlhttp.open(this.method, this.requestFile, true);
                    try {
                        this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                    } catch (e) { }
                }

                this.xmlhttp.onreadystatechange = function() {
                    switch (self.xmlhttp.readyState) {
                        case 1:
                            self.onLoading();
                            break;
                        case 2:
                            self.onLoaded();
                            break;
                        case 3:
                            self.onInteractive();
                            break;
                        case 4:
                            self.response = self.xmlhttp.responseText;
                            self.responseXML = self.xmlhttp.responseXML;
                            self.responseStatus[0] = self.xmlhttp.status;
                            self.responseStatus[1] = self.xmlhttp.statusText;

                            if (self.execute) {
                                self.runResponse();
                            }

                            if (self.elementObj) {
                                elemNodeName = self.elementObj.nodeName;
                                elemNodeName.toLowerCase();
                                if (elemNodeName == "input"
                                || elemNodeName == "select"
                                || elemNodeName == "option"
                                || elemNodeName == "textarea") {
                                    self.elementObj.value = self.response;
                                } else {
                                    self.elementObj.innerHTML = self.response;
                                }
                            }
                            if (self.responseStatus[0] == "200") {
                                self.onCompletion();
                            } else {
                                self.onError();
                            }

                            self.URLString = "";
                            break;
                    }
                };

                this.xmlhttp.send(this.URLString);
            }
        }
    };

    this.reset();
    this.createAJAX();
}

aparte de mi primer error, el problema es que no me trae nada de la base de datos, no rrellena los demas inputs automaticamente

Entiendo que la función getClientData() (que está en rellena.html) basa la consulta ajax en el contenido del campo que tiene el id "clientId". En el mismo rellena.html tienes un input text con ese id pero sin valor. Si no tiene valor, es lógico que al hacer la consulta no traiga nada de la base de datos. — javiertapia, Jul 26 '17 at 17:58
Una sugerencia: solo muestra la parte necesaria del codigo para que se nos haga mas fácil analizarlo. No todo el mundo tiene el tiempo de leer todo ese codigo. — Einer, Jul 26 '17 at 18:04
el primer error deberia solucionarse con esto [ ] luego de [ ] — Kevin, Jul 26 '17 at 18:04
y para el segundo te falta un ciclo para imprimir el resultado de la consulta en el caso de que traiga mas de 1 fila — Kevin, Jul 26 '17 at 18:06
@Kevin pero el php es quien hace esa funcion ¿no? al momento en que se ingrese un id en el input, hace la llamada y consulta a la base de datos y los imprime — Cesar Gutierrez Davalos, Jul 26 '17 at 18:13
Si a imprimir te refieres el siclo es solo para recorrer el arreglo generado en la consulta sql — Kevin, Jul 26 '17 at 18:18
Pregunta, ya probaste el archivo getClient.php, para ver si trae información? — Andrés, Jul 28 '17 at 16:39
@Andrés si, pero mira, esta mejor en esta explicacion https://es.stackoverflow.com/questions/91211/mostrar-resultado-en-inputs-con-b%c3%basqueda-sql?noredirect=1#comment167943_91211 — Cesar Gutierrez Davalos, Jul 28 '17 at 16:40

Kevin · Answer 1 · 2017-07-27T12:46:05.610

0

Para recorrer el arreglo de la consulta puedes hacer lo siguiente:

if(isset($_POST['getClientId'])){  
  $res = mysql_query("select * from ajax_client where clientID='".$_POST['getClientId']."'") or die(mysql_error());
   while($row = mysql_fetch_array($res)){
    echo "formObj.firstname.value = '".$inf["firstname"]."';\n";    
    echo "formObj.lastname.value = '".$inf["lastname"]."';\n";    
    echo "formObj.address.value = '".$inf["address"]."';\n";    
    echo "formObj.zipCode.value = '".$inf["zipCode"]."';\n";    
    echo "formObj.city.value = '".$inf["city"]."';\n";    
    echo "formObj.country.value = '".$inf["country"]."';\n"; 
   }
 }

de esta forma si la consulta trae mas de una fila las podrás imprimir. espero que te sirva saludos.

edited Jul 27 '17 at 12:46

answered Jul 26 '17 at 20:48

Kevin

707
9
22

he hecho lo que me indicaste pero sigue sin traerme informacion de hecho entro a getClient.php y hago un var_dump del query y no me trae nada – Cesar Gutierrez Davalos Jul 27 '17 at 02:41
edité mi respuesta no habia visto que el formulario lo envias por post, y como recibes los valores por get siempre estan vacios – Kevin Jul 27 '17 at 12:47
por alguna razon no me funciona, ni siquiera me muestra en el var_dump la conexion – Cesar Gutierrez Davalos Jul 27 '17 at 15:24
con que versión de de php estas trabajando? – Kevin Jul 27 '17 at 15:53
estoy trabajando con php 7 de hecho he cambiado la conexion a PDO – Cesar Gutierrez Davalos Jul 27 '17 at 17:08
y has probado la consulta directamente en en la base de datos?, has un echo a la variable `$_POST['getClientId']` para comprobar el valor que trae – Kevin Jul 27 '17 at 18:09
no trae nada,la variable post – Cesar Gutierrez Davalos Jul 27 '17 at 23:15

Llenado de inputs heredando de otro input

1 Answers1

Linked