Select que agrega datos a varios campos de texto

[axelb]

buenas noches, tengo el siguiente codigo:

Código Javascript:

function getCombo2(id_combo1){ //variable que espera la funcion
    var xmlhttp;
    if (window.XMLHttpRequest){// codigo for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{// codigo for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //funcion que se llama cada vez que cambia la propiedad readyState
    xmlhttp.onreadystatechange=function(){
        //readyState 4: peticion finalizada y respuesta lista
        //status 200: OK
        if (xmlhttp.readyState===4 && xmlhttp.status===200){
            //Pasar la respuesta html a div_combo2
            document.getElementById("div_combo").innerHTML=xmlhttp.responseText;
            document.getElementById("div_combo2").innerHTML=xmlhttp.responseText;
            document.getElementById("div_combo3").innerHTML=xmlhttp.responseText;
        }
    };
    /* open(metodo, url, asincronico)
    * metodo: post o get
    * url: localizacion del archivo en el servidor
    * asincronico: comunicacion asincronica true o false.*/
    xmlhttp.open("POST","get_combo2.php",true);//establece el header para la respuesta
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//enviamos las variables al archivo get_combo2.php
    xmlhttp.send("id_combo1=" + id_combo1);         
}
 

en conjunto con:

Código PHP:

<?php
include_once("localhost//datos_base_de_datos.php");
$conectar=mysqli_connect("$hosting","$usuario","$pass");
mysqli_select_db($conectar,"$base");
//recibimos la variable enviada desde ajax
$id_combo1=$_POST["id_combo1"]; 
//hacemos el query para obtener los datos segun la variable obtenida
$sql="select chofer,patente2,tara from tickets where patente='$id_combo1'";
//ejecutamos el query
$query= mysqli_query($conectar, $sql);
$a=mysqli_fetch_row($query);
mysqli_close($conectar);
?>
<!--Este es lo verdadero que mostramos con los datos cargados-->
<input type="text" name="chofer" value="<?php echo"$a[0]"; ?>"/>
<input type="text" name="tara" value="<?php echo"$a[2]"; ?>"/>
<input type="text" name="chapa2" value="<?php echo"$a[1]"; ?>"/>
 

funciona de la siguiente manera, al cambiar el valor de un select, se ejecuta la funcion, esta envia el valor del select y con ese valor ejecuto un consulta, y los resultados de la misma las muestro en un campo de texto, el problema es que son 3 campos que deben ir en 3 lugares distintos dentro de una tabla, pero en cada uno de esos lugares en donde debe ir uno, me aparecen los 3, osea que tengo 9 campos de texto, cada uno se repite 2 veces, como puedo solucionar mi problema?? Tengo muy muy poco conocimiento de javascritp! por favor ayudenme! gracias

[Alexis88]

Desde el archivo PHP, podrías enviar un array asociativo con los nombres y valores respectivos, luego, solo te queda crear las cajas de texto en la función que ejecuta la petición asíncrona (Ajax) y les asignas dichos valores.

Código PHP:

echo json_encode(array('chofer' => $a[0], 'tara' => $a[2], 'chapa2' => $a[1]));
 

Código Javascript:

var datos = JSON.parse(xmlhttp.responseText),
    i = 1, caja;
 
for (var prop in datos){
    caja = document.createElement("input");
    caja.type = "text";
    caja.name = prop;
    caja.value = datos[prop];
    document.getElementById("div_combo" + i).innerHTML = caja;
    i++;
}
 

Lo único que tendrías que modificar —aparte de esto— es el id del primero 'div_combo', al cual le añadirías un '1' al final del mismo, así como hiciste con 'div_combo2'. Puedes mantenerlo como lo tienes, pero tendrías que crear cada caja de texto y añadir los valores manualmente, mientras que de esta manera, el proceso sería automático.

Saludos

[axelb]

El archivo PHP me quedó asi:

Código PHP:

<?php
include_once("localhost//datos_base_de_datos.php");
$conectar=mysqli_connect("$hosting","$usuario","$pass");
mysqli_select_db($conectar,"$base");
//recibimos la variable enviada desde ajax
$id_combo1=$_POST["id_combo1"]; 
//hacemos el query para obtener los datos segun la variable obtenida
$sql="select chofer,patente2,tara from tickets where patente='$id_combo1'";
//ejecutamos el query
$query= mysqli_query($conectar, $sql);
$a=mysqli_fetch_row($query);
mysqli_close($conectar);
echo json_encode(array('chofer' => $a[0], 'tara' => $a[2], 'chapa2' => $a[1]));
?>
<script language="javascript" type="text/javascript">
var datos = JSON.parse(xmlhttp.responseText),
    i = 1, caja;
 
for (var prop in datos){
    caja = document.createElement("input");
    caja.type = "text";
    caja.name = prop;
    caja.value = datos[prop];
    document.getElementById("div_combo" + i).innerHTML = caja;
    i++;
}
</script>
 

al elejir el dato del select, ahora si aparecen en los lugares en donde deben ir, pero lo que me aparece es el echo del array completo en cada uno, que estaría faltando??

[Alexis88]

El código JavaScript debiste de colocarlo en el archivo en el cual haces la petición asíncrona (Ajax), no en el archivo PHP que recibe la petición. Corrige eso.

P.D.: Esas líneas de código JavaScript que te puse, deben de ir en lugar de estas que venías usando:

Código Javascript:

document.getElementById("div_combo").innerHTML=xmlhttp.responseText;
document.getElementById("div_combo2").innerHTML=xmlhttp.responseText;
document.getElementById("div_combo3").innerHTML=xmlhttp.responseText;
 

No olvides cambiar lo que te dije sobre el id del primer 'div_combo'.

Saludos

[axelb]

si, el id del primer div tiene el nombre de div_combo1

con respecto a lo demas, queda asi:

Código Javascript:

//FUNCION AJAX PARA LLAMAR LOS DATOS DEL SEGUNDO COMBO
function getCombo2(id_combo1){ //variable que espera la funcion
    var xmlhttp;
    if (window.XMLHttpRequest){// codigo for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{// codigo for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //funcion que se llama cada vez que cambia la propiedad readyState
    xmlhttp.onreadystatechange=function(){
        //readyState 4: peticion finalizada y respuesta lista
        //status 200: OK
        if (xmlhttp.readyState===4 && xmlhttp.status===200){
            //Pasar la respuesta html a div_combo2
            var datos = JSON.parse(xmlhttp.responseText), i = 1, caja;
 
            for (var prop in datos){
                caja = document.createElement("input");
                caja.type = "text";
                caja.name = prop;
                caja.value = datos[prop];
                document.getElementById("div_combo" + i).innerHTML = caja;
                i++;
            }
            /*document.getElementById("div_combo1").innerHTML=xmlhttp.responseText;
            document.getElementById("div_combo2").innerHTML=xmlhttp.responseText;
            document.getElementById("div_combo3").innerHTML=xmlhttp.responseText;*/
        }
    };
    /* open(metodo, url, asincronico)
    * metodo: post o get
    * url: localizacion del archivo en el servidor
    * asincronico: comunicacion asincronica true o false.*/
    xmlhttp.open("POST","get_combo2.php",true);//establece el header para la respuesta
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//enviamos las variables al archivo get_combo2.php
    xmlhttp.send("id_combo1=" + id_combo1); 
}
 

y el archivo php get_combo2 quedo asi:

Código PHP:

$conectar=mysqli_connect("$hosting","$usuario","$pass");
mysqli_select_db($conectar,"$base");
//recibimos la variable enviada desde ajax
$id_combo1=$_POST["id_combo1"]; 
//hacemos el query para obtener los datos segun la variable obtenida
$sql="select chofer,patente2,tara from tickets where patente='$id_combo1'";
//ejecutamos el query
$query= mysqli_query($conectar, $sql);
$a=mysqli_fetch_row($query);
mysqli_close($conectar);
echo json_encode(array('chofer' => $a[0], 'tara' => $a[2], 'chapa2' => $a[1]));
 

hay un par de cositas que no termino de entender, y si pudieras explcarmelas seria genial!

1) JSON.parse(xmlhttp.responseText) -> en la definicion de las variables
2) var prop in datos -> en el for
3) caja.name = prop; -> el nombre del textbox es "prop"??
4) caja.value = datos[prop]; -> que valor tomaria el texbox??

Muchas gracias Alexis88!!

[Alexis88]

Iniciado por axelb

Hay un par de cositas que no termino de entender, y si pudieras explcarmelas seria genial!

1) JSON.parse(xmlhttp.responseText) -> en la definicion de las variables
2) var prop in datos -> en el for
3) caja.name = prop; -> el nombre del textbox es "prop"??
4) caja.value = datos[prop]; -> que valor tomaria el texbox??

Con gusto:

1. JSON.parse(xmlhttp.responseText): Si te fijas en el archivo PHP, estoy devolviendo un array, pero como no puedo enviarlo directamente, le doy el formato JSON con lo cual el envío no tendrá problemas. Como lo que recibo es texto plano (por responseText), aplico el método JSON.parse para recuperar el objeto JSON que generé en el archivo PHP.
2. var prop in datos: Luego del punto anterior, lo que me queda es un objeto JSON, por lo que puedo recorrerlo con cualquier bucle (while, for). En JavaScript, hay un bucle llamado for...in, con el cual puedo recorrer arrays y objetos, en donde la primera variable representará a las propiedades del objeto y la segunda, al objeto.
3. caja.name = prop: En el array que formo en el archivo PHP, los índices son los nombres que originalmente habías asignado a tus cajas de texto y en el objeto JSON formado, son las propiedades, por lo tanto, para asignar los mismos nombres a las cajas de texto que genero en el código JavaScript, tengo que asignarles los valores de las propiedades del objeto JSON.
4. caja.value = datos[prop]: Lo mismo que en el caso anterior, solo que en lugar de los índices del array (que son las propiedades en el objeto JSON), le asigno los valores que corresponden a cada uno de ellos.

Saludos

[axelb]

haber si entendi, entonces con este array:

array('chofer' => $a[0], 'tara' => $a[2], 'chapa2' => $a[1])

prop= chofer, tara y chapa2
datos[prop]= $a[0],$a[2],$a[1]

para cada uno de los casos, no??

con respecto al funcionamiento de select, así como te lo deje en el mensaje anterior no me funciona, me tira el siguiente error: Uncaught SyntaxError: Unexpected token <
y no se que es lo que esta mal! :/

[Alexis88]

Fíjate en el número de línea en donde te marca el error y corrígelo.

Saludos

[axelb]

es lo que hice, me dice linea 2, pero no encuentro el error en esa linea ni en ninguna otra...

[Alexis88]

El mensaje es claro, te indica que se trata de un error de sintaxis, de manera que te va a tocar revisar con calma el código y ver en dónde has cometido el error.

Saludos

[axelb]

He encontrado el error, era una linda html comentada, una vez borrada dicha linea, al seleccionar el valor del select, en los lugares en donde deberia ir la info del array, me muestra "[object HTMLInputElement]"

que puede andar mal??

[Alexis88]

Ya me di cuenta, fue un error de mi parte.

No debes de asignar la caja de texto generada de esa manera, tienes que adherirla al elemento con el método appendChild.

Código Javascript:

document.getElementById("div_combo" + i).appendChild(caja);
 

Saludos

[axelb]

casualmente estaba leyendo acerca del appendChild, ya que googleando había encontrado que podría ser la solución, aunque como casi no tengo conocimientos de js, he probado de muchas formas distintas de asignar el texbox pero con ninguna pude lograrlo!

Le agregue la siguiente linea al código:

document.getElementById(prop).style.display="none" ;

para que los texbox que aparecen por defecto desaparezcan y funciona todo bien, el único inconveniente ocurre al seleccionar un segundo valor del select, sucede que deja el primero y agrega nuevamente los textbox con los datos de la segunda selección del select, se entiende?? como se podrá arreglar esto??

[Alexis88]

Ahí sí puedes usar la propiedad innerHTML pero para quitar el contenido. Quedaría así:

Código Javascript:

var datos = JSON.parse(xmlhttp.responseText),
    i = 1, caja, div;
 
for (var prop in datos){
    caja = document.createElement("input");
    div = document.getElementById("div_combo" + i);
    caja.type = "text";
    caja.name = prop;
    caja.value = datos[prop];
    div.innerHTML = null; //Retiro el contenido
    div.appendChild(caja); //Añado la caja de texto
    i++;
}
 

Ya sabes, esto va en lugar de esas tres líneas sobre las que te comenté antes.

Saludos

[caricatos]

Hola:

Iniciado por Alexis88

div.innerHTML = null; //Retiro el contenido

No entiendo porqué no asignas la cadena vacía...

Ademas, con el sistema de nodos también sería sencillo (aunque mediante un bucle):

while (div.hasChildNodes()) div.removeChild(div.firstChild);

Saludos

[Alexis88]

Iniciado por caricatos

No entiendo porqué no asignas la cadena vacía...

Porque es uno de los valores primitivos que se pueden usar en el lenguaje para representar la ausencia de cualquier valor, tal y como se indica en la especificación del lenguaje. No veo nada malo en su uso.

Por otro lado, esto:

Iniciado por caricatos

while (div.hasChildNodes()) div.removeChild(div.firstChild);

Si bien puede funcionar, no habría necesidad de aplicarlo en este caso; ten en cuenta que ya se está utilizando otro bucle que itera sobre un objeto, por lo que es solo cuestión de aprovechar dichas iteraciones para recorrer el conjunto de cajas de texto e ir limpiándolas.

Saludos

[axelb]

Muchas gracias!! Ahora todavia me queda hacer algo similar a esto, en base a la seleccion de un dato del select, debo crear 2 select segun el dato que reciba, será muy complicado eso??

[Alexis88]

Así como creo cajas de texto de manera dinámica, también puedes crear otros elementos, como los <select>.

Código Javascript:

document.createElement("select");
 

Saludos

[axelb]

Lo intentare en unos días!! Imagino que para pasarle los valores tendré que crear un array de la misma manera que en este caso, con la diferencia de que será dinámico también!

Muchas gracias por tu ayuda Alexis88!! Has dedicado mucho tiempo en ayudarme!! Saludos