Ocultar VARIOS elementos de un formulario

[roobre]

Hola a todos!
Antes de exponer mi duda, deciros que descarto cualquier respuesta que me proponga como solución getElementById(), ya que lo que quiero es ocultar varios elementos de un formulario, y no voy a ponerme a crear IDs a diestro y siniestro.
Lo podría hacer con un bucle for(), sí, pero también me parece mucho lío para algo tan simple :S

De momento lo que tengo es esto:

Código HTML:

<input type="radio" name="cat" onclick="
                          document.getElementById('soloopcion1').style.display = 'table-row';
                          document.getElementById('soloopcion2').style.display = 'none'">Opcion1<br />
<input type="radio" name="cat" onclick="
                          document.getElementById('soloopcion1').style.display = 'none';
                          document.getElementById('soloopcion2').style.display = 'table-row'">Opcion2

Y eso funciona a las mil maravillas.
Pero claro, yo necesito que me sirva para otros elementos del formulario.
Tampoco puedo hacer uso de getElementsByName, ya que lo que tengo son muchas filas de tabla de las cuales quiero ocultar VARIAS.

También sé que podría hacerlo con PHP, pero quiero que se haga del lado del cliente, ya que si no se acumulan muchas peticiones al servidor, pues serán varios los grupos de inputs que ocultaran cosas diferentes.

Ah, se me olvidaba: También he probado a poner que el style de las tr que quiero ocultar sea igual a una variable, pero algo estoy haciendo mal:

Código HTML:

<tr style=&{solooption1};> 

Curioso que me deje hacer eso para cualquier atributo excepto para style.

¿Alguien me da alguna idea?

[tredio]

seria mas fácil con css no crees?, podrias hacer un estilo parecido a este.

Código CSS:

.oculto{display:none;}
 

y si quieres ocultar algún elemento solo le cambias el atributo clase a "oculto"

[roobre]

Sí, pero volvemos a lo mismo: ¿Cómo selecciono los objetos a los que les tengo que cambiar la clase?

No obstante, gracias por responder tan pronto :P

[tredio]

usas jquery? o javascrit puro? con jquery seria tan sencillo como hacer esto

Código Javascript:

$('.clase_de_los_elementos')
 

[roobre]

Puro.
Soy todavía un completo noob en Javascript como para encima meterme con librerías de terceros.

No hay manera de hacerlo de la forma tradicional?

Repito: Mi problema es seleccionar los elementos. No se como seleccionar los <tr> a los que quiero cambiar el style (o la class)

[tredio]

de que hay una forma tradicional la hay, el problema es que no la conozco jeje, yo tambien estoy algo basico en js, y dejame decirte que "una libreria de terceros" como lo es jquery te simplificaria mucho la vida.

en js tienes la funcion getTagByName, pero no se si te serviria en lo que tratas de hacer.

[zerokilled]

yo no soy partidario de las librerias pero no por eso estoy en contra de ello. lo que no le veo sentido es cargar toda una libreria para una simple tarea. pero al fin, cada cual hace como quiere y guste.

de alguna forma tienes que identificar las filas. sin utilizar IDs, la unica forma que me parece posible es usando clases. es decir, le asignas la misma clase a todas la filas que quieras capturar. luego los captura con getElementsByClassName. el unico problema es que pese a un buen numero de navegadores soportar dicha funcion, ésta no es estandar e iexplorer8 y anteriores no tienen soporte. de todos modos se puede escribir una funcion similar para iexplorer. realiza una busqueda de esta funcion para iexplorer, se ha hablado mucho en todas las comunidades, incluso aqui.

@tredio, nunca he visto la funcion getTagByName... y tampoco existe. ¿habras querido decir getElementsByTagName?

[tredio]

si si es misma jeje, perdon por haberla escrito mal.

[roobre]

EDIT2: Ya lo he solucionado. ¿Como? Pues cargandome javascript y haciendolo todo del lado del servidor con PHP. Por si a alguien le interesa:

El PHP:

Código:

<?php
if ($_GET['modo'] == "avanzado") {
  $avanzado = "";
} else {
  $avanzado = "display:none";
}
?>

El CSS

Código:

    <style type="text/css">
      .soloavanzado{<? print $avanzado ?>}
    </style>

Para rularlo ponemos un botón:

Código HTML:

onclick="location.href='?modo=avanzado'"

Y otro que quite dicho modo

Y luego solo queda poner a las cosas que se quieren ocultar la clase correspondiente

Muchas gracias a todos por responder! :)

Probaré lo de getElementsByClassName hoy a ver que tal funciona y os cuento.

Saludos!

EDIT: He utilizado la clase getElementsByClassName, y me selecciona los objetos (si hago un alter() me dice "objet HTMLCollection"), pero no pued cambiarles la clase.

El CSS que uso es el siguiente:

Código:

      .solofisico_oculto {display:none}
      .solofisico_mostrado {display:table-row}
      .soloesp_oculto {display:none}
      .soloesp_mostrado {display:table-row}

Y luego, para cambiarla:

Código HTML:

onclick="
                        document.getElementsByClassName('solofisico_oculto').className = 'solofisico_mostrado';
                        document.getElementsByClassName('soloesp_mostrado').className = 'soloesp_oculto';

y

Código HTML:

onclick="
                        document.getElementsByClassName('solofisico_mostrado').className = 'solofisico_oculto';
                        document.getElementsByClassName('soloesp_oculto').className = 'soloesp_mostrado';

Pero no pasa nada al hacer onclick, la clase no cambia :S

[mayanmaster]

Justo ahora me topé con tu thread, hay varias formas de hacerlo pero no entiendo por qué no quieres usar el getelementbyid...

Puedes por ejemplo llamar y ocultar-modificar los elementos de tu formulario uno por uno accesándolos vía getelementbyid, es lo mejor pero para numerosos elementos hay otras formas como usar un array con los nombres de los elementos y un for... y ya.

La otra forma es colocando cada elemento o elementos que vas a modificar de mostrar-ocultar... insertándolos dentro de un SPAN ID. Así un solo SPAN ID (como si fuese un DIV) puede ser llamado y ocultado vía javascript, ya sea asignándole estilos css que tienen visible o invisible o por el método style.display="none" y style.display="".

Otra forma que puedes usar es asignándole un estilo CLASS a cada elemento de tu formulario y luego usar un getelementsbytagname lo cual se va a un array y luego le das un for asignándole otros estilos css ocultos o visibles o bien directamente con las propiedades style.display="none" y style.display="".

Lo he usado en mis formularios donde van agrupados, fácilmente metiéndolos en un span id... cuando son arbitrarios y van repartidos los que se van a ver y no, entonces o los pongo en span ids numerados (formv1, formv2) etc y me voy con un for o bien si de verdad son muchas las variantes les asigno los estilos css en el class y luego con el getbytagname se van de lo lindo asinándoles luego el style.display="none" etc.

Entiendo tu solución via server pero si son muchas las consultas a lo mejor te acelera bastante trabajar del lado del cliente. He comprimido bastante código de esta manera y usando ciclos.

Pero no pasa nada al hacer onclick, la clase no cambia :S

Hazlo vía getelementsbytagname... y dependiendo del nombre de su clase ponles el style.display="none". Es un ciclo sencillo y te ahorras mucho trabajo.

Estoy un poco confundido con lo que pretendes en el ejemplo que mencionas no funciona... pero veamos, tienes varios elementos con esas clases asignadas... y aunque el código "está bien" estás intentando alterar todos con una línea, eso no se puede. Al hacerle un getelements estás almacenando todos en un array, entonces ahi debes aplicar un ciclo for para modificar cada elemento.

Si quieres alterarlos con una línea entonces no llames a los elementos, llama LA CLASE CSS y alérala. Esa sería una solución sencilla, asígnale la clases "VARIABLE" o por ejemplo "ELEMENTOCONDICIONAL", etc.... como quieras que se llame y ponle esa clase a los objetos.

Luego usa el script de http://www.shawnolson.net, llamado algo así como publicsmoscripts.js.

Se puede hacer a pie pero hay problemillas cross browser, este tío ya lo depuró y podés decirle changecss, NOMBRE, la propiedad y el nuevo valor y ya, te lo cambia todo con una línea.

Espero haberme explicado bien, ya hice lo que quieres con todos y cada uno de estos métodos en distintas oportunidades

Suerte.
Busca