Guardar Var Jscript y mostrar en campo determinado html

HackID1 · #1 (**permalink**) 16/03/2015, 09:23

Hola Foreros!!.

Buenas tardes, ya hace tiempo no pasaba por aquí, pero estos días me ha surgido una duda un poco básica de Javascript, aunque aún así no consigo dar con la solución.

Se que es bastante fácil para muchos y por eso pido ayuda.

PROBLEMA: Tengo un formulario en una página html llamada minombre.html

Código HTML:

Ver original<html>
<head>
 
            #contenedor {
                color: #ff0000;
                border: 1px #solid #ff0000;
                display: none;
            }
        </style>
        
        <script>
            var mi_variable = "Hola Mundo";
            var btn = document.getElementById("btn");
            btn.onclick = leer;
 
            function leer(){
                var contenedor = document.getElementById("contenedor");
                var mitexto = document.getElementById("mitexto");
                mitexto.value = mi_variable;
                contenedor.innerHTML = mi_variable;    
                contenedor.style.display = "block";
                
            }
        </script>
</head>
 
<body>
 
    <!--  div contenedor -->
    <div id="contenedor1">
        
        <h1 align="center" style="color:black; background-color:#2E9AFE"> Formulario de Nombre </h1>
        <br/><br/><br/>
        <div align="center">
                
                Introduzca su nombre:
                <br/>
                <input type="text" id="mitexto" value="" />
                <div id="contenedor"><!-- aqui ver resultado variable --></div>
                <p><input type="button" value="Guardar Nombre" id="btn" /></p>
            </form>
        </div>
        <div id="informacion"> aqui: </div>
    </div>
    <!-- end div contenedor -->
 
</body>
 
</html>

Bien aquí lo único que hago es pedir un nombre por un campo input, quiero que ese nombre introducido se almacene en una variable para luego mostrarlo en un campo de la página, en este caso es en un DIV llamado contenedor.

Pero me gustaría primero solucionar esto, y luego poder mostrar ese contenido almacenado en la VAR en otra página HTML diferente, que al cargarla ya aparezca directamente el nombre introducido si es que hay alguno previamente.

Es decir, guardar el nombre introducido en una VAR y luego mostrar ese nombre en un campo de otra página HTML, eso es todo lo que necesito.

Gracias a quien pueda ayudarme.

Me ha gustado volver a la comunidad después de bastantes días sin pasar por aquí jeje.
Saludos!!

Alexis88 · #2 (**permalink**) 16/03/2015, 09:40

Si estás usando un formulario, entonces el dato introducido en el campo de texto puede ser enviado mediante el método GET, de tal modo que, si no es un archivo PHP, puedas leer la URL del archivo destino, tomes el valor recibido y lo asignes al campo de texto que desees, pero si es un archivo PHP, entonces lo tomarías así: $_GET['nombre (no el id) del campo de texto en donde escribiste el valor'].

Por cierto, trata de colocar ese bloque de código JavaScript después de todos tus elementos y justo antes de la etiqueta </body> o, de lo contrario, esto:

Código Javascript:

Ver originalvar mi_variable = "Hola Mundo";
var btn = document.getElementById("btn");
btn.onclick = leer;

No funcionará.

Saludos

HackID1 · #3 (**permalink**) 16/03/2015, 11:10

Gracias por tu ayuda, de acuerdo ya he cambiado de posición los códigos Javascript, pero aún tengo la duda de como pasar esa variable con el nombre y mostrarla en otra página HTML.

No puedo usar PHP (ojalá jejejeje).

Estoy mirando montones de páginas y no encuentro ninguna que se adapte a lo que quiero, se que es simple pero no doy con esto, JScript siempre me da guerra.... ;)

Y si!!, estoy usando un form para envíar de alguna forma lo escrito a una VAR y almacenarlo, para luego cuando cambie a la otra página justo se visualice en una parte ese VALOR DE LA VAR.

saludos

PHPeros · #4 (**permalink**) 16/03/2015, 11:40

Supongo que necesitarás usar Cookies o LocalStorage.

HackID1 · #5 (**permalink**) 16/03/2015, 11:48

SI en el apartado me pone algo de LocalStorage, pero no se bien como hacerlo de esta forma.

Me podrías ayudar con este paso.

Gracias ;)

PHPeros · #6 (**permalink**) 16/03/2015, 11:52

Busca información:

http://www.w3schools.com/html/html5_webstorage.asp

HackID1 · #7 (**permalink**) 20/03/2015, 04:47

Estuve leyendo sobre ellos y intentando hacer algún código pero no doy con la solución nunca he usado los Local Storage, y si en este proyecto me lo piden, algo muy sencillo almacenar la VAR nombre y luego en una página distinta .html mostrar en un espacio:

información: $nombre_guardado bienvenido.

Eso es todo.

Igual seguiré intentándolo espero me puedan guiar gracias.

Adrianbu95 · #8 (**permalink**) 20/03/2015, 06:02

Hola.
Antes de nada te aconsejo que pongas name al formulario y al input de tipo text y accedas a este mediante:

Código Javascript:

Ver originaldocument.name_form.name_text.value

Y si no me falla la memoria únicamente tienes que crear una función y recoger el valor del input en una variable javascript:

Código Javascript:

Ver originalfunction leer(){
                var mitexto = document.name_form.name_text.value;

Luego, almacenar esa variable en un localStorage dentro de la funcion:

Código Javascript:

Ver originallocalStorage.setItem('variable', mitexto);   //Aqui variable es el nombre que se le da al item, y le asignas el valor de la variable mitexto.
}

Ahora asigna esta función a "onchange" en el input de tipo texto.

A la hora de mostrar el valor del localStorage solo tienes que:

Código Javascript:

Ver originalfunction mostrar(){
document.getElementById("informacion").innerHTML = localStorage.getItem('variable');
}

Y asignar esta función al "onclick" del botón.

Esto no solo sirve para recuperar el valor en la misma pagina, funciona de forma parecida a las cookies y por lo tanto puedes recuperarlo en el resto.
Espero que con esto te hagas una idea clara de como funciona.

Un saludo.

HackID1 · #9 (**permalink**) 27/03/2015, 10:18

Buenas se me ha borrado el anterior mensaje.

Lo repito, he conseguido que funcione gracias a tu script pero necesito pasar esa variable a otra página html.

Cómo lo hago?

Aquí te dejo lo que intente pero no me funciono.

Código HTML:

Ver original<html>
<head>
<script src="js/show_name.js"></script>
        
        <script>
            window.onload = mostrar();
        
        </script>
</head>
 
<body>
<li id="informacion">
                    <div >
                        Informaci&oacute;n: 
                    </div>
                </li>
</body>
 
</html>

Dentro de show_name.js esta el script tal cual me lo enviaste tu, lo llamé en mi página HTML llamada index.html (que es esta que te envie) pero no me ejecuta nada ;( .

En la otra pagina anterior (que es la que contiene el input text con el botón, en esa si funciona al darle al botón mostrar el nombre almacenado, pero en esta no.

PD: antes lo explique mejor pero se me borro el mensaje entero ;( espero me entiendas un poco con esto.

Gracias por todo.

Alexis88 · #10 (**permalink**) 27/03/2015, 10:57

Cuando guardas un valor de manera local, ya sea con Cookies con Local Storage, puedes recuperarlo en cualquier otra página.

Página A:

Código Javascript:

Ver originallocalStorage.foo = 1;

Página B:

Código Javascript:

Ver originalalert(localStorage.foo); //1

Saludos

HackID1 · #11 (**permalink**) 27/03/2015, 11:20

Buenas gracias por responderme,

estoy intentando con lo que me comentaste pasar la VARIABLE a mi index.html

Funciona así:

Código Javascript:

Ver original//alert(localStorage.variable);
 
//document.write(localStorage.variable);

Pero lo escribe donde sea, claro porque es con el método write, necesito que lo escriba en un campo que es un:

Código HTML:

Ver original<li id="informacion" onclick="mostrar()">
                    <div >
                        Informaci&oacute;n: 
                    </div>
                </li>

Y lo intente de esta forma, pero no me funciona, se que es algo sumamente básico, aunque seguiré intentando otras maneras, esta fue la que intente también.

Código Javascript:

Ver original//para intentar escribir en el campo informacion.. :(
document.getElementById("informacion").innerHTML = localStorage.variable;

Saludos y muchas gracias de verdad siempre me has ayudado mucho alexis88 y gracias a AdrianBu95 y PHPeros sin todos no hubiera logrado el avance hasta ahora.

:) Sigo mirando la forma de transladar la VAR con su contenido jeje. gracias.

Alexis88 · #12 (**permalink**) 27/03/2015, 11:32

Verifica en la consola que exista la variable y el valor.

Código Javascript:

Ver originalconsole.log(localStorage.variable);

Saludos

HackID1 · #13 (**permalink**) 27/03/2015, 11:37

Buenas alexis88.

Si esta el dato correctamente pasado por la variable.

La consola ejecutando con Ctrl + MAY + J me devuelve este resultado:

Código Javascript:

Ver originalUncaught TypeError: Cannot set property 'innerHTML' of null
console.log(localStorage.variable);
VM1545:2 CARLOS
undefined

Ese error es de pruebas que estoy haciendo... creo.

Saludos..

PD: Si FUNCIONA, solo que tenia puesta la propiedad ONCLICK jeeje.

Ahora como podría cargar esa variable automáticamente en la página para cuando entre al index.html y haya un dato este se cargue automáticamente en esa parte del la web.

dentro de las etiquetas:

Código HTML:

Ver original<li id="informacion" onclick="mostrar()">
                    <div >
                        Informaci&oacute;n: 
                    </div>
                </li>

Porque este con ONCLICK lo que hace es reemplazarme todo lo anterior y tengo además que dar clic y necesito que se cargue automáticamente.

Gracias!!!!

Alexis88 · #14 (**permalink**) 27/03/2015, 11:42

Solo por casualidad, ¿ese código JavaScript se encuentra en la cabecera del documento? Si es así, ponlo después de todos los elementos del documento y justo antes de la etiqueta </body>, pues, de la forma en la que está (si es que está en la cabecera), primero está cargando el código JavaScript y luego los elementos del DOM, por lo tanto, el código JavaScript no surte efecto ya que no hay elementos a los cuales afectar.

Saludos

HackID1 · #15 (**permalink**) 01/04/2015, 02:52

Hola alexis88.

Bueno estuve probando muchas formas, el campo se muestra en mi otra pág pero cuando hago con una función

Código HTML:

Ver original<li id="informacion" onclick="mostrar()">
                    <div >
                        Informaci&oacute;n: 
                    </div>
                </li>

La llamada a la función con un CLIC, pero como hago para que se muestre apenas cargue la página html, es decir justo al entrar que aparezca ya: Información Hola Juan. (por ejemplo)

Gracias por toda tu ayuda.

Adrianbu95 · #16 (**permalink**) 01/04/2015, 05:28

Utiliza esa función pero en vez de asignarsela al evento onclick de una etiqueta, asignasela al evento onload en la etiqueta body.
Un saludo.

HackID1 · #17 (**permalink**) 01/04/2015, 07:11

Gracias ha funcionado, si en efecto era algo de no conocer donde posicionar la llamada a la función, lo intente con onload pero colocan dolo en el mismo sitio y no en body ejej

Solo me surge la ultima duda, como hago para que aparezca este texto junto con la VAR.

Código Javascript:

Ver originalHola $VAR bienvenido.

Saludos y muchas gracias.

Alexis88 · #18 (**permalink**) 01/04/2015, 10:31

Solo concaténalo:

Código Javascript:

Ver originalvar id = "#id del elemento en el que se mostrará el texto";
document.querySelector(id).innerHTML = "Hola " + localStorage.variable + ". Bienvenido.";

Saludos

HackID1 · #19 (**permalink**) 03/04/2015, 13:22

Hola Alexis88

Lo intente como dijiste pero ya no se ejecuta el código para almacenar la VAR y luego mostrarlo en la otra página.

Te dejo lo que intente con tu ayuda y la de los demás.

:)

Código Javascript:

Ver originalfunction leer(){
        var mitexto = document.name_form.nombre.value;
    var variable = localStorage.setItem('variable', mitexto);   // variable es nombre que se le da al //item, y le asignas el valor de la variable mitexto.
    }
            
function mostrar(){
        var id = "#formulario";
    document.querySelector(id).innerHTML = "Hola" + localStorage.variable + " Bienvenido.";
    //document.getElementById("informacion").innerHTML = "Hola" + localStorage.getItem('variable');
    }

PD:

Tenia echo esta parte y va perfectamente !!!

Código Javascript:

Ver originalfunction mostrar(){
        document.getElementById("informacion").innerHTML = "Hola " + localStorage.getItem('variable') + " Bienvenido";
    }

Gracias de verdad por vuestra ayuda sin esto no podría haberlo conseguido de verdad, voy a seguir con los códigos y si tengo dudas acerca de este mismo script los posteo a continuación aquí mismo.

Alexis88 · #20 (**permalink**) 03/04/2015, 13:46

Cita:

Iniciado por HackID1

Lo intente como dijiste pero ya no se ejecuta el código para almacenar la VAR y luego mostrarlo en la otra página.

Es que el último ejemplo que te pasé no era para almacenar datos sino para mostrarlos. Tienes que saber diferenciar entre un método obtenedor (getter) y un establecedor o modificador (setter). La ventaja del almacenamiento local es que permite trabajar con la dotación por corchetes y por puntos, de tal modos que el uso de dichos métodos no es del todo necesario.

Código Javascript:

Ver original//OBTENEDOR
var x = localStorage.variable;
 
//ESTABLECEDOR
localStorage.variable = "ABC";

Saludos