Foros del Web » Programando para Internet » Javascript »

Guardar Var Jscript y mostrar en campo determinado html

Estas en el tema de Guardar Var Jscript y mostrar en campo determinado html en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2015, 09:23
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Pregunta Guardar Var Jscript y mostrar en campo determinado html

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
  1.  
  2.             #contenedor {
  3.                 color: #ff0000;
  4.                 border: 1px #solid #ff0000;
  5.                 display: none;
  6.             }
  7.         </style>
  8.        
  9.         <script>
  10.             var mi_variable = "Hola Mundo";
  11.             var btn = document.getElementById("btn");
  12.             btn.onclick = leer;
  13.  
  14.             function leer(){
  15.                 var contenedor = document.getElementById("contenedor");
  16.                 var mitexto = document.getElementById("mitexto");
  17.                 mitexto.value = mi_variable;
  18.                 contenedor.innerHTML = mi_variable;    
  19.                 contenedor.style.display = "block";
  20.                
  21.             }
  22.         </script>
  23. </head>
  24.  
  25.  
  26.     <!--  div contenedor -->
  27.     <div id="contenedor1">
  28.        
  29.         <h1 align="center" style="color:black; background-color:#2E9AFE"> Formulario de Nombre </h1>
  30.         <br/><br/><br/>
  31.         <div align="center">
  32.                
  33.                 Introduzca su nombre:
  34.                 <br/>
  35.                 <input type="text" id="mitexto" value="" />
  36.                 <div id="contenedor"><!-- aqui ver resultado variable --></div>
  37.                 <p><input type="button" value="Guardar Nombre" id="btn" /></p>
  38.             </form>
  39.         </div>
  40.         <div id="informacion"> aqui: </div>
  41.     </div>
  42.     <!-- end div contenedor -->
  43.  
  44. </body>
  45.  
  46. </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!!
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #2 (permalink)  
Antiguo 16/03/2015, 09:40
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. var mi_variable = "Hola Mundo";
  2. var btn = document.getElementById("btn");
  3. btn.onclick = leer;

No funcionará.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 16/03/2015, 11:10
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #4 (permalink)  
Antiguo 16/03/2015, 11:40
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

Supongo que necesitarás usar Cookies o LocalStorage.
  #5 (permalink)  
Antiguo 16/03/2015, 11:48
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 ;)
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #6 (permalink)  
Antiguo 16/03/2015, 11:52
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

Busca información:

http://www.w3schools.com/html/html5_webstorage.asp
  #7 (permalink)  
Antiguo 20/03/2015, 04:47
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #8 (permalink)  
Antiguo 20/03/2015, 06:02
 
Fecha de Ingreso: diciembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. document.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 original
  1. function leer(){
  2.                 var mitexto = document.name_form.name_text.value;
Luego, almacenar esa variable en un localStorage dentro de la funcion:
Código Javascript:
Ver original
  1. localStorage.setItem('variable', mitexto);   //Aqui variable es el nombre que se le da al item, y le asignas el valor de la variable mitexto.
  2. }
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 original
  1. function mostrar(){
  2. document.getElementById("informacion").innerHTML = localStorage.getItem('variable');
  3. }
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.
  #9 (permalink)  
Antiguo 27/03/2015, 10:18
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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
  1. <script src="js/show_name.js"></script>
  2.        
  3.         <script>
  4.             window.onload = mostrar();
  5.        
  6.         </script>
  7. </head>
  8.  
  9. <li id="informacion">
  10.                     <div >
  11.                         Informaci&oacute;n:
  12.                     </div>
  13.                 </li>
  14. </body>
  15.  
  16. </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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #10 (permalink)  
Antiguo 27/03/2015, 10:57
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. localStorage.foo = 1;

Página B:
Código Javascript:
Ver original
  1. alert(localStorage.foo); //1

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #11 (permalink)  
Antiguo 27/03/2015, 11:20
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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
  1. //alert(localStorage.variable);
  2.  
  3. //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
  1. <li id="informacion" onclick="mostrar()">
  2.                     <div >
  3.                         Informaci&oacute;n:
  4.                     </div>
  5.                 </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
  1. //para intentar escribir en el campo informacion.. :(
  2. 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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #12 (permalink)  
Antiguo 27/03/2015, 11:32
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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

Código Javascript:
Ver original
  1. console.log(localStorage.variable);

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #13 (permalink)  
Antiguo 27/03/2015, 11:37
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. Uncaught TypeError: Cannot set property 'innerHTML' of null
  2. console.log(localStorage.variable);
  3. VM1545:2 CARLOS
  4. 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
  1. <li id="informacion" onclick="mostrar()">
  2.                     <div >
  3.                         Informaci&oacute;n:
  4.                     </div>
  5.                 </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!!!!
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #14 (permalink)  
Antiguo 27/03/2015, 11:42
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #15 (permalink)  
Antiguo 01/04/2015, 02:52
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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
  1. <li id="informacion" onclick="mostrar()">
  2.                     <div >
  3.                         Informaci&oacute;n:
  4.                     </div>
  5.                 </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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #16 (permalink)  
Antiguo 01/04/2015, 05:28
 
Fecha de Ingreso: diciembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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.
  #17 (permalink)  
Antiguo 01/04/2015, 07:11
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. Hola $VAR bienvenido.

Saludos y muchas gracias.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #18 (permalink)  
Antiguo 01/04/2015, 10:31
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

Solo concaténalo:

Código Javascript:
Ver original
  1. var id = "#id del elemento en el que se mostrará el texto";
  2. document.querySelector(id).innerHTML = "Hola " + localStorage.variable + ". Bienvenido.";

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #19 (permalink)  
Antiguo 03/04/2015, 13:22
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
Puntos: 17
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

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 original
  1. function leer(){
  2.         var mitexto = document.name_form.nombre.value;
  3.     var variable = localStorage.setItem('variable', mitexto);   // variable es nombre que se le da al //item, y le asignas el valor de la variable mitexto.
  4.     }
  5.            
  6. function mostrar(){
  7.         var id = "#formulario";
  8.     document.querySelector(id).innerHTML = "Hola" + localStorage.variable + " Bienvenido.";
  9.     //document.getElementById("informacion").innerHTML = "Hola" + localStorage.getItem('variable');
  10.     }

PD:

Tenia echo esta parte y va perfectamente !!!

Código Javascript:
Ver original
  1. function mostrar(){
  2.         document.getElementById("informacion").innerHTML = "Hola " + localStorage.getItem('variable') + " Bienvenido";
  3.     }


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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #20 (permalink)  
Antiguo 03/04/2015, 13:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Guardar Var Jscript y mostrar en campo determinado html

Cita:
Iniciado por HackID1 Ver Mensaje
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
  1. //OBTENEDOR
  2. var x = localStorage.variable;
  3.  
  4. //ESTABLECEDOR
  5. localStorage.variable = "ABC";

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: campo, determinado, formulario, html, input, jscript, var, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:20.