textarea, con select y javascript

AlvaroX · #1 (**permalink**) 10/11/2008, 11:01

Hola mi dilema es el siguente:

tengo un select con diferentes options, la idea es al hacer click en un option, cambiar lo que se muestra en un textarea ejemplo (por si no me entienden)

<select>
<option>opcion 1</option>
<option>opcion 2</option>
<option>opcion 3</option>
</select>

<textarea>texto x</textarea>

donde texto x, es un texto dependiendo la opcion tomada en select

espero que se entienda y me puedan ayudar

mil gracias.

David · #2 (**permalink**) 10/11/2008, 11:02

Puedes usar el evento onchange del select para saber cuál de ellas fue seleccionada y luego colocar el texto deseado en el textarea con innerHTML o manipulando el DOM.

AlvaroX · #3 (**permalink**) 10/11/2008, 11:04

Cita:

Iniciado por David el Grande

Puedes usar el evento onchange del select para saber cuál de ellas fue seleccionada y luego colocar el texto deseado en el textarea con innerHTML o manipulando el DOM.

sorry amigo se me olvido no se javascript recien estoy empezand con php y html me podrias ser tan amable de mostrarme como hacerlo porfavor!

una ultima cosa, como puedo hacer para que no escriban ni borren el contenido del textarea?

David · #4 (**permalink**) 10/11/2008, 11:16

Un ejemplo sería:

Código javascript:

Ver originalwindow.onload = function() { /* Esperamos a que se carguen todos los elementos */
    select.onchange = function() { /* Asignamos el evento onchange */
         textarea.innerHTML = this.value; /* Colocamos dentro del textarea el value seleccionado */
    }
}

Solo tienes que cambiar "select" y "textarea" por las respectivas referencias a los elementos. Y para que no se modifique el textarea solo coloca el atributo readonly="readonly".

P.S.: Las referencias a los elementos puedes obtenerlas con getElementById.

AlvaroX · #5 (**permalink**) 10/11/2008, 11:21

Cita:

Iniciado por David el Grande

Un ejemplo sería:

Código javascript:

Ver originalwindow.onload = function() { /* Esperamos a que se carguen todos los elementos */
    select.onchange = function() { /* Asignamos el evento onchange */
         textarea.innerHTML = this.value; /* Colocamos dentro del textarea el value seleccionado */
    }
}

Solo tienes que cambiar "select" y "textarea" por las respectivas referencias a los elementos. Y para que no se modifique el textarea solo coloca el atributo readonly="readonly".

P.S.: Las referencias a los elementos puedes obtenerlas con getElementById.

vamos a probar gracias...

AlvaroX · #6 (**permalink**) 10/11/2008, 11:37

no me sale :(

David · #7 (**permalink**) 10/11/2008, 11:41

¿Qué intentaste? ¿Cómo lo hiciste? ¿Qué te falló? ¿Miraste la Consola de Errores?.

Porque el código con las referencias correctas y con los value de los option colocados correctamente debería funcionar, así que no puedo adivinar qué hiciste mal

.

JavierB · #8 (**permalink**) 10/11/2008, 11:42

Hola AlvaroX

Explícate mejor. Si sólo dices "no me sale", ¿cómo quieres que sepamos a qué te refieres?

¿Te da algún error? ¿qué código estás usando? etc...

Edito: tenía que haber adivinado que chocaría con David

Saludos,

AlvaroX · #9 (**permalink**) 10/11/2008, 12:07

es que no se nada de javascript, pregunte como hacer lo que quiero y me dijeron js... y no entiendo nada de manejo de javascript, solo se que tengo que dejar todas las funciones en la cabecera de html y llamar la funcion en body pero mas que eso no se :S :(

foreverOdd · #10 (**permalink**) 10/11/2008, 14:08

El codigo de David lo pones en la cabecera (<head>) de tu pagina

antes, como tambien te dijo david haces:

select = document.getElementById('_id_del_select_')
textarea = document.getElementById('_id_del_textarea_')

Suerte

AlvaroX · #11 (**permalink**) 10/11/2008, 18:19

Tengo este script:

<html>
<head>

<script language="JavaScript">

window.onload = function()
{
document.getElementById('chao').onchange = function()
{
document.getElementById('hola').innerHTML = this.value;
}
}

</script>
</head>
<body>
<form>
<select name="chao">
<option value=1>1</option>
<option value=2>2</option>
</select>

<textarea name="hola"></textarea>
</form>

</body>
</html>

y no me resulta que hago?

David · #12 (**permalink**) 10/11/2008, 18:30

Estás casi bien, el problema es que con getElementById tratamos de obtener el objeto que tenga cierto ID y no el name. O sea, en vez de colocar "hola" y "chao" en el atributo name coloca en el atributo id.

Saludos

.

AlvaroX · #13 (**permalink**) 10/11/2008, 18:38

Cita:

Iniciado por David el Grande

Estás casi bien, el problema es que con getElementById tratamos de obtener el objeto que tenga cierto ID y no el name. O sea, en vez de colocar "hola" y "chao" en el atributo name coloca en el atributo id.

Saludos

.

holy shit!! jajaaj gracias me resulto..

una pregunta se podria ocupar getElementByName? ajajajajajaja no falta el que quiere hacerlo rapido

Otra duda como lo hago para que cuando cargue la pagina tome el 1 como opcion, ya que cuando carga el text area esta vacio hasta que vuelvo a colocar como opcion el 1, con checked podria ser?

David · #14 (**permalink**) 10/11/2008, 18:43

No, getElementByName no existe

, y no hace falta tampoco

.

Para lo segundo puedes ejecutar directamente en el evento onload (o sea, no dentro del onchange del select) el código:

Código javascript:

Ver originaltextarea.innerHTML = select.value;

Ahora, si lo que quieres es que en el select la opción seleccionada por defecto sea otra, agrega el atributo selected.

AlvaroX · #15 (**permalink**) 10/11/2008, 18:50

sorry por las molestias pero asi estaria bien?

<html>
<head>

<script language="JavaScript">

window.onload = function()
{
document.getElementById('chao').onchange = function()
{
document.getElementById('hola').innerHTML = document.getElementById('chao').value;
}
}

</script>
</head>
<body>
<form>
<select id="chao">
<option value=1>1</option>
<option value=2>2</option>
</select>

<textarea id="hola"></textarea>
</form>

</body>
</html>

David · #16 (**permalink**) 10/11/2008, 19:09

Prueba así:

Código javascript:

Ver originalwindow.onload = function() { /* Al cargar la página */
     /* Asignamos a variables los elementos
     evitando tener que llamar a getElementById a cada rato */
     selectelem = document.getElementById("chao");
    textareaelem = document.getElementById("hola");
 
    textareaelem.innerHTML = selectelem.value; /* A esto me refería, ya que se ejecuta al cargar la página */
    selectelem.onchange = function() { 
        textareaelem = this.value; /* Esto no hace falta cambiar, ya que era lo que se ejecutaba al cambiar el select */
    }
}

Saludos

.

AlvaroX · #17 (**permalink**) 10/11/2008, 19:20

perdon denuevo lo deje asi:

<html>
<head>

<script language="JavaScript">

window.onload = function() { /* Al cargar la página */
/* Asignamos a variables los elementos evitando tener que llamar a getElementById a cada rato */
selectelem = document.getElementById("chao");
textareaelem = document.getElementById("hola");
textareaelem.innerHTML = selectelem.value; /* A esto me refería, ya que se ejecuta al cargar la página */
selectelem.onchange = function() {
textareaelem = this.value; /* Esto no hace falta cambiar, ya que era lo que se ejecutaba al cambiar el select */
}
}

</script>

</head>
<body>
<form>
<select id="chao">
<option value=1>1</option>
<option value=2 CHECKED>2</option>
</select>

<textarea id="hola"></textarea>
</form>

</body>
</html>

y lo que me sucede es que en el textarea al iniciar la pag me sale 1, si cambio el select queda el 1 =

perdon por las molestias pero me ayudarias demasiado si termino esto.

David · #18 (**permalink**) 10/11/2008, 19:24

La línea 9 del mensaje anterior corrige por esto:

Código javascript:

Ver originaltextareaelem.innerHTML = this.value;

Fue un error mío, faltó el innerHTML, esta clase de errores las puedes encontrar y depurar/corregir mirando la Consola de Errores de tu navegador, o usando el complemento FireBug del navegador Firefox.

Saludos

.

AlvaroX · #19 (**permalink**) 10/11/2008, 19:39

Cita:

Iniciado por David el Grande

La línea 9 del mensaje anterior corrige por esto:

Código javascript:

Ver originaltextareaelem.innerHTML = this.value;

Fue un error mío, faltó el innerHTML, esta clase de errores las puedes encontrar y depurar/corregir mirando la Consola de Errores de tu navegador, o usando el complemento FireBug del navegador Firefox.

Saludos

.

muchas gracias por el consejo y gracias por tu preocupacion.

ahi si esta listo todo muchas gracias!! nose como agradecerte enverdad!! jaajaj me simplificaste mucho la vida

AlvaroX · #20 (**permalink**) 10/11/2008, 20:48

otra cosa porfavor!! esta si es la ultimisima!

como puedo mostrar algo html en un textarea y que no sea escrito sino que sea interpetado como html

ejemplo:

teniendo esto:

<textarea>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</textarea>

que lo muestre asi:

·1
·2
·3

y no talcomo esta:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

parece que es algo complejo pero espero que me puedan ayudar

David · #21 (**permalink**) 10/11/2008, 20:54

¿Has investigado sobre lo que te comenté?. Editores WYSIWYG.

P.S.: ¿Sabías que no está permitido duplicar mensajes?

.

AlvaroX · #22 (**permalink**) 10/11/2008, 21:05

por eso copie y peguepara no crear un nuevo post, pero bueno... vere eso

AlvaroX · #23 (**permalink**) 10/11/2008, 21:45

ocupe este:

http://www.fckeditor.net/demo

pero no me resulto nada

AlvaroX · #24 (**permalink**) 12/11/2008, 20:59

oye ahora tengo un problema, si actualizo la pagina de vez en cuando el script no me corre que debo hacer

David · #25 (**permalink**) 12/11/2008, 21:03

Puedes usar la Consola de Errores para saber si se está produciendo algún error.

Si sigue dando errores, cambia de editor que hay muchos

. O verifica que estés siguiendo las instrucciones de implementación correctamente.

AlvaroX · #26 (**permalink**) 12/11/2008, 21:20

No me sale nada en Consola de Errores.

simplemente a veces me meto a la pagina y me resulta otras veces no.

AlvaroX · #27 (**permalink**) 12/11/2008, 21:57

Investige un poco todo el script y tengo entendido que window.onload, no se como funciona pero si que se pone en marcha cuando se carga completamente la pagina, talvez ahi radica el problema, ya que cargue la pagina a nivel localhost luego lo subo a mi pagina y me da ese problema que de vez en cuando se cambia el textarea.

podria ser que el problema es el host?