Problemas añadiendo/mostrando elementos a una lista

galorn · #1 (**permalink**) 12/04/2010, 08:10

Hola a todos:

Éste es mi primer mensaje en el foro, muchas gracias de antemano por la ayuda.
Estoy haciendo una web simple, en la que quiero ir añadiendo "productos" a una lista de la compra. Hasta ahora lo tenía montado que al introducir lo que desearas en un campo de texto y clicar al boton añadir, te lleva a una función donde me creaba un nuevo párrafo con ese producto y al terminar hay un botón terminar que te lleva a otra función donde junta todos esos productos y los muestra por una alerta.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
<script type="text/javascript" src="codigo2.js"></script>
<title>Lista de la compra</title>
</head>


<body>
<noscript>
  <p>Bienvenido a lista de la compra</p>
  <p>La pagina que estas viendo requiere para su funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
<h1>Aplicacion para realizar la lista de la compra</h1>
<p><b>Bienvenido,</b></p> 
<p>Estas en la pagina <b>Lista de la compra</b>.</p> 
<p>Introduce los productos que deseas añadir al carro de la compra: </p>
<p>Una vez finalizado, dale al boton TERMINAR </p>
<form name="formulario" id="formulario" >
	<input type="text" name="elemento" id="texto" />
</form>


<input type="submit" value="Añadir" onclick="otroElemento()">

<input type="submit" value="TERMINAR" onclick="presentacion()">

<UL>
<LI>Productos que se desean añadir al carrito de la compra:


</body>
</html>

Código Javascript:

Ver originalfunction otroElemento() {
    var valor = document.getElementById("texto").value;
    var primerElemento = document.formulario.elemento;
    // Crear nodo de tipo Element
    var parrafo = document.createElement("p");
    // Crear nodo de tipo Text
    var contenido = document.createTextNode(valor);
    // Añadir el nodo Text como hijo del nodo Element
    parrafo.appendChild(contenido);
    // Añadir el nodo Element como hijo de la pagina
    document.body.appendChild(parrafo);
    var valor = document.getElementById("texto").value="";
}
 
function presentacion() {
    var parrafos = document.getElementsByTagName("p");
    var parrafo = "A continuacion se muestra su lista de la compra: ";
    for(var i=4; i<parrafos.length; i++) {
        var parrafo = parrafo + "  " + parrafos[i].innerHTML;
    }
    alert(parrafo);
}

Pero me gustaría que en vez de añadir párrafos, añadiera elementos a una lista desordenada (la que he comenzado, por ejemplo) y después en vez de mostrarlos en una alerta, mostrar la lista entera en otra página. La cuestión es que no se me ocurre como.

Muchas gracias de nuevo, un saludo a todos.

Adler · #2 (**permalink**) 12/04/2010, 08:39

Hola

Lo que puedes hacer es crear una matriz y irle añadiendo valores. Para ellos usa la función push()
En cuanto a ver esos elementos en otra página, has de usar location.href, apuntando hacia la página que quieres abrir. A esa url le añades los valores de la matriz. En la página que recibe los valores, los puedes sacar con location.search.substr(1)

Edito; 20:46
Releyendo, en vez de usar lo que te he marcado en negrita, también puedes recoger los valores de la manera habitual $_GET o Request.QueryString (del lado del servidor) o con window.location.hash

Suerte

galorn · #3 (**permalink**) 13/04/2010, 09:18

Muchas gracias por la ayuda, al final lo he echo en forma de tabla:

Código Javascript:

Ver originalfunction otroElemento2(array) {
    var valor = document.getElementById("texto").value;
    var capa = document.getElementById("capa");
    var LI = document.createElement("LI");
    LI.innerHTML = valor;
    capa.appendChild(LI);
    var valor = document.getElementById("texto").value="";
}

Código HTML:

<form name="formulario" id="formulario" >
	<input type="text" name="elemento" id="texto" />
</form>

<input type="submit" value="Añadir" onclick="otroElemento2()">

<input type="submit" value="TERMINAR" onclick="presentacion2()">

<p>Productos añadidos:
<UL id="capa">
</UL>

Pero no me queda claro como pasar la tabla resultante a otra página (por ejemplo con la función que he llamado presentacion2() para mostrarla tal cual (en forma de tabla desordenada).

Un saludo!