<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
html
script.js
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();
});
- ejercicio.rar(3,8 MB)
Valora esta pregunta
0
