Dúvida Função JavaScript Escondendo Campos da Tela

Olá,

Estou enfrentando o seguinte problema, com javascript…

Eu quero fazer o seguinte, se a pessoa selecionar feminino num outro campo, eu quero sumir com algumas linhas da minha tabela. Torná-las invisíveis.
O exemplo abaixo funciona para somente um único campo. Por mais que eu bote o id=“condicoesMulher” nos outros campos, somente funciona para um deles. Acho que a função javascritp deveria ser num loop, para identificar os outros campos que também tem o mesmo id. Mas e ai como deve ficar?

<tr> <td width="25%"> <div id="condicoesMulher" style="display: none"> <span style="width:100px"> <select style="width: 159px" name="pessoaReferencia.gravida"> <option value="" <c:if test="${estrutura.mulherGravida eq 'Selecione'}"> selected="true" </c:if>> - Selecione -</option> <option value="Sim"<c:if test="${estrutura.mulherGravida eq 'Sim'}"> selected="true" </c:if>> Sim </option> <option value="N&atilde;o"<c:if test="${estrutura.mulherGravida eq 'Não'}"> selected="true" </c:if>> N&atilde;o</option> </select> </span> </div> </td> <td></td> </tr>

//**Condições da Mulher function mostraCondicoesMulher() { if(document.getElementById("condicoesMulher").style.display == "none") { document.getElementById("condicoesMulher").style.display = "block"; } } function escondeCondicoesMulher(){ if(document.getElementById("condicoesMulher").style.display == "block"){ document.getElementById("condicoesMulher").style.display = "none"; }else { document.getElementById("condicoesMulher").style.display = "none"; } }

Existem varias maneiras de tu solucionar este problema.
Uma seria adicionar um caracter numerico dps do id dos componentes femininos, de maneira crescente. Ex: condicoesMulher01,condicoesMulher02…
E fazer um for e deixando-os invisiveis.
Outra maneira…Se eu nao me engano se tu pegar a referencia do objeto caminhando pela arvore de objetos(Ex: document.formulario.minhaTabela.condicoesMulher ao inves de document.getElementById(‘condicoesMulher’)) ira retornar um ARRAY com os objetos que tenham o id igual ao especificado. Ai fica facil iterar este array.

Olá,

Existe um erro na sua solução, que é o seguinte: Não devem existir componentes com o mesmo ID.

Justamente por não ser permitido é que não existem métodos para selecionar mais de um.

Algumas soluções são:

  • colocar um ID com sequencial numérico (solução mostrada acima)
  • Guardar em uma variável o array de elementos sujeitos a modificação.

[quote=gomesrod]Olá,

Existe um erro na sua solução, que é o seguinte: Não devem existir componentes com o mesmo ID.

Justamente por não ser permitido é que não existem métodos para selecionar mais de um.

Algumas soluções são:

  • colocar um ID com sequencial numérico (solução mostrada acima)
  • Guardar em uma variável o array de elementos sujeitos a modificação.[/quote]

Boa tarde gomesrod;

Não é permitido ou não é indicado?
Pois aqui eu tenho uma aplicação onde são criados vários inputHidden de maneira dinamica e todos possuem o mesmo ID. Escolhi fazer dessa maneira pois facilitaria a iteração de acordo com a minha aplicação, e não da conflito nenhum.

Entendi, mas mudando um pouco o foco. Se eu precisar ocultar uma table inteira, sendo que esta, possui alguns componentes dentro, vcs tem alguma sugestão?

Não é permitido mesmo, faz parte das especificações do HTML:
“The id must be unique within the HTML document.” -> http://www.w3schools.com/tags/att_standard_id.asp

Não sei qual deve ser o comportamento dos browsers ao encontrar tal situação (é possível que a maioria simplesmente ignore), mas o desenvolvedor que utiliza ids duplicados está confiando com um comportamento não-documentado, e programar contando com o acaso não é boa prática.

:arrow: Mas veja bem, isso que você fez: document.formulario.minhaTabela.condicoesMulher // Retorna array não está em conflito com a regra, pois essa maneira de acessar os elementos utiliza na verdade o atributo name, que a princípio pode ser repetido entre elementos.

gomesrod

Na verdade eu estou fazendo confusão pois os atributos ‘name’ dos inputHidden não estão declarados, e os Id’s estão todos iguais. O browser faz algum tratamento nesta situação? Pois como ele sabe quais ‘name’ ele tem que buscar se apenas os ‘id’ estão preenchidos?

marcio_jagua

As tabelas possuim o “display” assim como os inputs e tu pode deixar ela invisivel da mesma maneira

O browser tenta ignorar erros de HTML mal formado, mas não faz milagre! A página pode funcionar em um browser, mas falhar em outro, é bom não abusar.
Para varios componentes com o mesmo valor use o atributo “class”

<div class="condicoesMulher" style="display: none">
...
</div>

O problema é que javascript não tem um “getElementByClass”…
As bibliotecas jQuery e prototype têm.
Ou entãoalgo assim http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/

Puxa vida isso só vendo pra crer! hehehe

Hehehehehe
Vou postar um trecho do código aqui:

function jsIncluiLinha(P1) {	
	(...)	
	cell001.innerHTML="<a href=# border=0 onClick=jsEliminaLinha("+P1+");><img/></a>&nbsp;"; 
	cell002.innerHTML="<input type='hidden' id='codigoProduto' value="+eval(P1)+"/><input type='text' id='quantidade' name='quantidade'>&nbsp;";   
	cell003.innerHTML=document.getElementById("S"+P1).innerHTML;
}
cell00x são as referencias para uma celula de uma tabela('Produtos Selecionados') em uma outra div.
Para ter acesso a esses objetos eu faço assim.

produto = document.form2.codigoProduto;					
if(produto.length > 1) {
	for(cont001=0;cont001<produto.length;cont001++){						
		if(document.getElementById(''+produto[cont001].value)!=null){
			document.getElementById(''+produto[cont001].value).style.background="#CDD9C1";
			document.getElementById("C"+produto[cont001].value).checked=true;
		} 
	}
}

O código em sí não diz muita coisa pq eu retirei algumas partes para ficar mais legivel. Mas a idéia é mais ou menos a seguinte, eu verifico se existem objetos com o id(ou seria name?) codigoProduto, e se existir vou mudando o estilo dos elementos que possuem o id igual ao atributo valor dos inputHidden. Como se os inputHidden fossem apenas ponteiros, ou referencias para outros ojetos.

Edit -

gomesrod eu fiz alguns testes aqui tentando entender o comportamento do browser nesta situação(IE e FF o resto nem tentei) e me parece que ao navegar pela arvore DOM desta forma: document.form2.codigoProduto você está dizendo ao browser que quer todos os objetos que possuam o ID ou o NAME igual ao atributo especificado, codigoProduto neste caso.
Talvez seja por isso que o meu codigo funcione perfeitamente.