11 replies to this topic

[Bruno Augusto]

Bom galera eu montei um formulario com quatro campos radio:
Os quatro com a propriedade name = "type" e values diferentes.

Perfeito.

Daí eu precisava fazer com que uma certa DI aparecesse e desaparecesse de acordo com o radio "pressionado".
E o amigo edmais passou essa aqui:

function configBlock( bool )
{
if ( bool )
{
document.getElementById("configuration").style.display = "";
}
else
{
document.getElementById("configuration").style.display = "none";
}
}

Funciona certinho.

Só que agora é aparecesse-desaparece diferente, pois a cada radiobutton assinalado, deve aparecer OU uma DIV diferente OU um conteúdo diferente para essa mesma DIV.
Não sei qual seria mais prático.

A título de desenvolvimento, o ID da DIV que atualmente aparece e desaparece é configuration

[]'s

Edição feita por: Jackpot, 19/04/2006, 21:40.

[edmais]

Para criar um novo elemento dentro de outro, basta seguir o exemplo:

var div1 = document.getElementById("configuration");
var spn = document.createElement('span');
spn.setAttributes("id", "Label1");
div1.appendChild(spn);

Testaí!

[Bruno Augusto]

Na verdade, se eu fizer assim, criando elemento por elemento e depois atribuindo pra depóis exibir, vai ficar meio grande uo código par uma tarefa simples.

O código que deverá ser "adicionado" é, praticamente para quase todos os elementos, esse:

<div id="configuration" style="display:none;">
<div class="spacer"></div>
<div class="borderwrapper">
<div class="subtitle">
Configura&ccedil;&otilde;es da Zona
</div>
<div class="subcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="6" class="maintable">
<tr>
<td width="60%"><strong>Texto I </strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<strong>Texto II </strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td valign="middle">
<strong>Texto III </strong><br>
[DESCRI&Ccedil;&Atilde;O].</td>
<td valign="middle">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div class="spacer"></div>
</div>

Ou seja, eu queria reaproveitar a função para abrir a DIV e exibir o conteúdo de acordo com o radiobutton selecionado, porém quando fosse selecionado outra opção, esse primeiro seria fechado, sendo exibido o outro correspondente. E assim por diante, pelo quatro elementos.

[]'s

[edmais]

Por que você nao cria quatro Div's diferentes? Uma para cada radio, e assim de acordo com a opção escolhida, você desabilita todos e depois habilita a marcada. Acho esse, o método mais simples de se fazer.

Ou então, você pode chamar uma função dentro das div's que fica encarregada por dar um document.write em todo o conteúdo que você quer exibir.

[Bruno Augusto]

Exibir e ocultar UM elemento (DIV) eu já aprendi com o código que tu passou.
Mas e ocultar mais de um? Alterando de acordo com o radio?

[]'s

[edmais]

document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";

[Mantu]

document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";

Pessoal, só tomem um pouco de cuidado com o obj.style.display="none" porque tem versões do firfox que fazem com que o top e o left do obj sejam zerados quando se usa esse trem aí...

[Bruno Augusto]

Mas como que eu farai isso com esse código Ed uma vez que só existem dois condicionais na função: IF/ELSE

Se eu simplesmente adicionar esse código "no meio" ele vai vai funcionar para um dos radios, já que o objeto de teste é um valor booleano e não baseado em verificação "do quê" está selecionado.

[]'s

[edmais]

Exemplo de como eu faria:

<input type="radio" name="group" id="chk1" onclick="executa(this, 'div1');" value="1" checked="checked" />
<input type="radio" name="group" id="chk2" onclick="executa(this, 'div2');" value="2" />
<input type="radio" name="group" id="chk3" onclick="executa(this, 'div3');" value="3" />
<input type="radio" name="group" id="chk4" onclick="executa(this, 'div4');" value="4" />
<input type="hidden" name="hdn_controle" id="hdn_controle" value="1" />

<div id="div1" style="display:inline;"></div>
<div id="div2" style="display:none;"></div>
<div id="div3" style="display:none;"></div>
<div id="div4" style="display:none;"></div>

Função:

function executa(obj, div_s)
{
document.getElementById("div"+document.getElementById("hdn_controle").value).style.display="none";
document.getElementById(div_s).style.display="inline";
document.getElementById("hdn_controle").value = obj.value;
}

Taí, se gostar da sugestão, teste, pq nem testei não.

Ps: Esqueci de explicar, o hidden ali foi só para controlar a "última" opção selecionada!

Edição feita por: edmais, 20/04/2006, 17:02.

[Bruno Augusto]

Esse daí só funciona com o último radio, os outros três nada.
Querdizer o primeiro ta,bém funcina, mas nele não entra o JS, já que é só CSS.
Eu clico na úlima "bolinh" e abre o DIV correspondente, clico entro e essa é fechada.
Mas as "bolinhas" 2 e 3 nada.

**Bolinhas é mais rápido do que radiobutton

[]'s

[Bruno Augusto]

Enjoaram do post?

Desculpa pessoal, mas é que eu ainda tô aprendendo.

[]'s

[Alex Hiroshi]

Fique calmo Jackpot, já vi mais de dois tópicos seus onde você deu esse seu "up". O pessoal tem uma vida fora do fórum.
Sabemos que você precisa de ajuda, como qualquer outro, mas tenha mais calma, certo?

Você só copiou e testou o que o edmais postou? Tentou fazer de outras maneiras?

Você pode ocultar todas as divs de um outro jeito tbm
http://forum.wmonlin...1&st=&p=

O que ele faz? Esconde TODAS as divs da página. É só adaptar para ele, no fim do script, mostre a div que você quer.