Reemplazar campos.

[Gaug]

Hola.

Estoy de nuevo molestando con algunos problemas que tengo en JavaScript, lo que necesito es una función que, por ejemplo, tengo un select que me despliega una lista que toma ciertos valores de una BD, lo que yo busco es que al momento de seleccionarla se transforme/reemplace esa lista con una caja de texto con el valor que elegí, he visto que se puede hacer con "document.createElement" aunque la verdad no estoy muy seguro de cómo o dónde debo utilizarlo.

Sí se pudiera hacer eso, me gustaría saber si se puede que en vez de que aparezca la caja de texto, se imprima simplemente el valor, ¿es posible hacer esto?

Espero puedan ayudarme, gracias de antemano.

Saludos.

[David]

Puedes reemplazar el elemento así:

Código javascript:

var lista = document.getElementById("id_del_select");
var texto = document.createElement("input");
texto.type = "text";
texto.value = lista.value;
lista.parentNode.replaceChild(texto, lista);
 

[Gaug]

¿Hay manera de ejecutar 2 funciones en un onchange? es que también uso otra.

[David]

Usando el separador de instrucciones:

Código javascript:

funcion1(); funcion2();
 

[Gaug]

Muchas gracias, ya funcionó.

Tengo otra pregunta, habrá manera de que el valor se imprima sin la caja de texto, borrarle los bordes, o cambiarle el color para que no se vean, ¿alguna de éstas opciones es posible?

Saludos.

[zerokilled]

en lugar de crear una caja de texto crea un TextNode y reemplaza el HTMLSelect con el TextNode.

Código:

var lista = document.getElementById("id_del_select");
var texto = document.createTextNode(lista.value);
lista.parentNode.replaceChild(texto, lista);

sino, la otra alternativa es utilizar estilos para dar la apariencia de ser un texto normal, pero aclaro que seguira siendo un input text y la altura de este puede confligir con la altura de la linea de texto.

[Gaug]

Así es justo como lo quería, hehe muchas gracias a ambos.

EDIT: Otra pregunta, al momento de elegir la opción se desaparece la lista, entonces si me llego a equivocar al elegir la opción, planeo hacer un botón que resetée sólo el form, no toda la página, y así pueda volver a elegir si me equivoqué, ¿cómo sería la función para esto?.

Y si me pudieran ayudar con esta otra pregunta, les estaría muy agradecido, me gustaría que al momento de dar Imprimir o Vista preliminar o ambos los botones que mencioné anteriormente no aparezcan, osea que se vean en pantalla, pero no al momento de imprimir, ¿me explico?

Se los agradezco de antemano.

Saludos.

[Gaug]

EDIT: Necesito crear una función para un botón que resetee un campo, si por ejemplo tenía el select que toma valores de la BD, con las función que me dieron ustedes, reemplace ese select, entonces este botón debe de "resetearlo" por así decirlo, pero sin refrescar la página.

Se me ocurrió algo como esto:

Código javascript:

function crearselect1() {
      var texto= document.getElementById("centro_costo");
      var lista= document.createElement("select");
      texto.parentNode.replaceChild(lista, texto);
      }
 

Pero no tengo una idea clara de como ordenarlo, el select se llama "centro_costo" y el botón se llama "boton1", además aunque creara el select, ¿éste volvería a tomar los valores de la BD? ¿qué me recomiendan hacer?

Gracias de antemano, saludos.

[David]

¿Y si en vez de reemplazar el select simplemente lo ocultas? Con lista.style.display = "none"; lo ocultas y con lista.style.display = "block"; lo vuelves a mostrar. El texto puede estar en un <span> (por ejemplo) y también sigue la misma mecánica, lo ocultas cambiando su estilo display.

Saludos.

[Gaug]

Se me ocurrió una forma mejor y laboriosa al menos para mi, como tengo que hacer muchos botones de esos para cada campo, preferí hacer 2 veces los campos, sólo que separados por un "if(isset..." con un sólo botón que resetée los campos.

Ahora mi problema es que quiero crear un botón de imprimir, y que al darle click me desaparezca en un determinado tiempo ambos botones, el de "Limpiar campos" y el de "Imprimir"; para que cuando termine la impresión vuelvan a aparecer y poder a volver a limpiar los campos si es necesario, lo que quiero es que no salgan estos botones en la impresión, ¿me explico?

¿Alguna forma para hacer esto?

Saludos.

[David]

No es necesario que los desaparezcas al momento de imprimir. Basta con crear una hoja de estilos para impresión (media=print) con el cual ocultas los elementos que no quieres mostrar:
http://www.csslab.cl/?p=15

[Gaug]

Oh gracias, es justo lo que necesitaba, pero ¿cómo aplico ésta hoja de estilos para los botones solamente? no estoy muy familiarizado con CSS.

Y pénsandolo mejor, usaré el método que me mencionaste de "style.display" ya que tengo que hacer botones individuales para cada campo, sólo que como te digo, me imagino que al seleccionar la opción, me escondería la lista, y me mostraría solamente el texto, y al darle click, me aparecería la lista de nuevo, ¿no?, pero y el texto también seguiría ahí, ¿cómo soluciono eso?

Saludos.

[David]

El texto lo puedes ocultar también con style.display = "none" (estando en una etiqueta cualquiera, como <span> o <div> o lo que sea)

En cuanto a la hoja de estilos, puedes asignar un class a los elementos que no quieres que se vean en la impresión. Por ejemplo:

Código html:

<button type="button" class="noprint">Imprimir</button>
 

Código css:

.noprint {
    display: none;
}
 

[Gaug]

Ah muchas gracias, pero el problema ahora es que tampoco me aparece en pantalla hehe.

Saludos.

[David]

¿Le has agregado el media="print" a la referencia a la hoja de estilos?

[Gaug]

Es cierto, se me pasó ponerlo, pero ya lo probé y funciona a la perfección, muchas gracias por tu ayuda.

[Gaug]

Hice un <span> en vez de un <div>, algo así

Código javascript:

<span id="boton1" onclick="document.forms.tipo.style.display='none'"><input type="button" id="boton" name="boton" value="Limpiar" /></span>
 

El select se llama tipo, ¿qué es lo que está mal?

Saludos.

[David]

mmm... La idea era que el span esté al lado del select. Así, puedes ocultar el span y mostrar el select y viceversa.

[Gaug]

Tengo esto:

Código javascript:

<span id="menu1"><select name="tipo" id="tipo" >
          <option value="asdf">asdf</option>
        </select>
        </span>
        <input type="button" id="boton" name="boton" value="Limpiar" onclick="document.menu1.tipo.style.display='none'" />
 

Pero aún así eso me desaparece el select y eso no es lo que quiero, se supone que al elegir una opción del select, se me crea un textnode, y lo que busco es que al darle click me desaparezca ese textnode y me vuelva a aparecer el select.

La función que me dieron arriba es para reemplazarlo, me imagino que tengo que cambiar ese "replaceChild", ¿usaría el "style.display"? o ¿cómo sería?

Saludos y de nuevo gracias por tu ayuda David.

[David]

Mira, la idea es esta:

Código html:

<span id="stipo"></span><select id="tipo">...</select>
 

Así, no necesitas usar el replaceChild. Sólo cuando quieras mostrar el texto haz esto:

Código javascript:

var texto = document.getElementById("stipo");
var lista = document.getElementById("tipo");
texto.innerHTML = lista.value;
texto.style.display = "block";
lista.style.display = "none";
 

Y cuando quieras volver a mostrar la lista, ocultas el texto y muestras la lista (cambiando su estilo display), ¿se entiende?

[Gaug]

Ya entendí la idea, el problema es que por ejemplo tengo algo así:

Código javascript:

Tipo: <span id="stipo"></span><select id="tipo">...</select>
 

y al momento de convertirlo en texto se brinca el renglón, ¿cómo podría evitar esto?

[David]

En lugar de display = "block" prueba usando display = "inline"

[Gaug]

Listo, ya funcionó.

¿Cómo hago referencia con el botón para mandar a llamar la función a la inversa?

Intenté cambiar la ruta de las variables y poner el getElementById, pero no me funcionó.

De nuevo agradezco tu atención, saludos.

[David]

Con getElementById debería funcionar sin problemas, ¿cómo lo intentaste?

[Gaug]

La función en este caso se llama mostrar para mostrar el texto, y ocultar para ocultarlo, valga la redundancia, tengo esto así en el botón:

Código javascript:

<input type="button" id="boton" name="boton" value="Limpiar" onclick="ocultar();" />
 

La función ocultar está así:

Código javascript:

function ocultar() {
 
      var texto = document.getElementById("stipo");
      var lista = document.getElementById("tipo");
      texto.innerHTML = lista.value;
      texto.style.display = "none";
      lista.style.display = "inline";
      }
 

Habia intentado poner en las variables "document.stipo.tipo.getElementById" pero no me funcionó.

Saludos.

[David]

Debería funcionar, ¿seguro que esos son los id que asignas a los elementos?

[Gaug]

Sí, pero ten en cuenta que la función la estoy ejecutando desde el botón, ¿no será ése el problema?, según tengo entendido tengo que hacer referencia desde el botón al span y el select.

[David]

No debería causar problemas aunque llames a la función desde el botón. Revisa la Consola de Errores de tu navegador para saber si se está produciendo algún error.

[Gaug]

Me marca error en esta línea:

Código javascript:

texto.innerHTML = lista.value;
 

[David]

Si vas a ocultar el <span>, esa línea no va a ser necesaria; por lo que puedes quitarla (aunque no debería dar problemas ), ¿cuál es el error que marca?