JQuery - <select> cargado desde xml, Segun la opcion carga valores en <inputs>

   
Vista:

<select> cargado desde xml, Segun la opcion carga valores en <inputs>

Publicado por Antonio (1 intervención) el 17/06/2016 15:51:28
¡Buenas tardes ante todo! Es la primera vez que participo/escribo en este foro. Soy un estudiante de un ciclo superior y se me presenta el siguiente problema.

Tengo un fichero xml. En mi html tengo un botón que carga las opciones del xml a un <select>, y lo que quiero, pero no consigo hacer que funcione, es que según la opción elegida en una serie de inputs me rellene con los valores restantes. Os copio mi código y os adjunto mis archivos. Ojalá pudierais ayudarme, ya que me estoy volviendo loco. ¡Muchísimas gracias de antemano!

xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<almacen>
    <producto>
        <nombre>PS3</nombre>
        <marca>SONY</marca>
        <precio>133€</precio>
        <descripcion>Es una consola</descripcion>
    </producto>
    <producto>
        <nombre>XBOX</nombre>
        <marca>MICROSFOT</marca>
        <precio>166€</precio>
        <descripcion>Es una consola mala</descripcion>
    </producto>
</almacen>

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Venta de Productos</title>
    <link rel="stylesheet" href="datos.xml">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/normalize.css">
    <script src="jquery-1.12.3.min.js"></script>
    <script src="jquery.cookie.js"></script>
    <script src="scripts.js"></script>
</head>
<body>
  <header><h1>Venta de Consolas</h1></header>
  <section>
     <div id="contain">
         <form action="" id="formu">
       <select name="productos" id="productos">
       </select>
       <input type="button" value="Cargar Productos" id="boton" class="buton"><br><br>
 
       <p>DNI</p><input type="text" name="dni" required><br>
       <p>Nombre</p> <input type="text" name="nombre" required><br>
      <p>Apellido</p>  <input type="text" name="apellido" required> <br><br>
 
      <p>marca:</p>  <input type="text" name="marca" id="marca"><br>
      <p>precio:</p>  <input type="text" name="precio" id="precio"><br>
       <p>descripcion:</p> <input type="text" name="descripcion" id="descripcion"><br>
 
       <input type="submit" value="Hacer Pedido" formaction="recogida.html" class="buton">
   </form>
 
     </div>
  </section>
 
    <footer></footer>
 
</body>
</html>

script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$(document).ready(function(){
 
    var xmlDoc;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if ((xhttp.readyState==4) && (xhttp.status==200)){
            xmlDoc = xhttp.responseXML;
            var arrayProductos=xmlDoc.getElementsByTagName("producto");
 
           $("#boton").click(function(){
                for(var i=0;i<arrayProductos.length;i++){
                    var productoData = arrayProductos[i];
                    var x=document.getElementById("productos");
                    var option = document.createElement("option");
 
                    var name=$(productoData).find("nombre").text();
 
                    option.text = name;
                    x.add(option)
 
 
                };
 
               $("select[name=productos]").change(function(){
 
                    var mark=$(productoData).find("marca").text();
                    var price=$(productoData).find("precio").text();
                    var description=$(productoData).find("descripcion").text();
                   //NO ENTIENDO POR QUE NO FUNCIONA EL TEXT NI EL APPEND
                    $("#marca").val(mark);
                    $("#precio").val(price);
                    $("#descripcion").val(description);
                });
            });
 
            $("#formu").submit(function(){
                var dni=$('input:text[name=dni]').val();
                var nombre=$('input:text[name=nombre]').val();
                var apell=$('input:text[name=apellido]').val();
 
                var marca=$('input:text[name=marca]').val();
                var precio=$('input:text[name=precio]').val();
                var descripcion=$('input:text[name=descripcion]').val();
                $.cookie("dni",dni);
                $.cookie("nombre",nombre);
                $.cookie("apell",apell);
                $.cookie("marca",marca);
                $.cookie("precio",precio);
                $.cookie("descripcion",descripcion);
 
            });
            $(function(){
                $("#dni").append('DNI: '+$.cookie("dni"));
                $("#nombre").append('NOMBRE: '+$.cookie("nombre"));
                $("#apellidos").append('APELLIDO: '+$.cookie("apell"));
                $("#marca").append('MARCA: '+$.cookie("marca"));
                $("#precio").append('PRECIO: '+$.cookie("precio"));
                $("#descrip").append('DESCRIPCION: '+$.cookie("descripcion"));
            });
        }
 
    }
    xhttp.open("GET", "datos.xml", true);
    xhttp.send();
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

<select> cargado desde xml, Segun la opcion carga valores en <inputs>

Publicado por Vainas (96 intervenciones) el 17/06/2016 20:25:31
Buenas:

Es un poco largo pero aqui va mi resultado para esto:

1.Primero que nada, ya que usas jquery no uses:

1
2
var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){

Por temas de que funcione igual en todos los navegadores...

2. Al xml yo le agregaria una etiqueta id o algo parecido a un identificador unico asi al hacer un for para buscar dentro podemos saber donde hay que ir a buscar (los nombres, marcas y precios se pueden repetir...)

3. He modificado tambien la creacion de la etiqueta option a como lo se hacer yo con jquery (hay maneras aun mas limpias que la mia...)

El truco para mi esta en agregarle al option un value con un id y asi luego cuando se hace el onchange se puede mirar ese valor y recorrer de nuevo el xml (para acceder a ese valor en el onchange basta con usar "this.value";

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#boton").click(function(){
         var arrayProductos = $(xmlDoc).find('producto');
         var select_productos = $('#productos');
         for(var i=0;i<arrayProductos.length;i++){
           var productoData = arrayProductos[i];
           var name = $(productoData).find("nombre").text();
           var id = $(productoData).find("id").text();
           var option = $('<option></option>').text(name);
           option.val(id);
           select_productos.append(option);
 
         }
	 });

Esto no tiene mayor complicacion que lo que he comentado anteriormente de meter un valor id que viene en el xml como:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<almacen>
    <producto>
        <id>1</id>
        <nombre>PS3</nombre>
        <marca>SONY</marca>
        <precio>133€</precio>
        <descripcion>Es una consola</descripcion>
    </producto>
    <producto>
        <id>2</id>
        <nombre>XBOX</nombre>
        <marca>MICROSFOT</marca>
        <precio>166€</precio>
        <descripcion>Es una consola mala</descripcion>
    </producto>
</almacen>

y luego lo meto en el value del option con:

1
2
var id = $(productoData).find("id").text();
           var option = $('<option></option>').text(name);

En el onchange me queda algo asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#productos").change(function(){
		 var id = this.value;
		 var arrayProductos = $(xmlDoc).find('producto');
		 for(var i = 0; i < arrayProductos.length; i++){
			 var productoData = arrayProductos[i];
			 if($(productoData).find("id").text() == id){
				 var hermanos = $(productoData).find("id").siblings();
				 break;
			 }
		 }
 
     $.each(hermanos, function( index, value ){
     var valor = $(value).prop("tagName");
     $("#"+valor).val($(value).text());
     });
});

lo que hago es recorrer de nuevo el xmlDoc y cuando doy con el id en el que estoy actual (que viene del onchange con this.value) lo que hago es que selecciono todas las etiquetas hermanas de ese id, que vienen a ser: nombre, marca, precio y descripcion.

Lo ultimo es un for pero de jquery (el $.each(...)) que lo que hace es recorrer todos esos hermanos y simplemente meter su value en el input correspondiente.

Te dejo un ejemplo funcionando aqui: https://jsfiddle.net/6gq2wuLs/1/

Si tienes duda pregunta.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar