Botão para aparecer e desaparecer div

[wesleymoser 0]

Se tiver algum exemplo agradeço

[Fleury 3]

Um outro exemplo:

<div id="meuDiv" style="position: absolute; width: 50px; height: 50px; top: 30px; left: 30px; display: none; background-color: #99CC00">Teste</div><input type="button" value="mostra" onClick="document.getElementById('meuDiv').style.display = 'block'"><input type="button" value="esconde" onClick="document.getElementById('meuDiv').style.display = 'none'">

[wesleymoser 0]

òtimo esse script mas não funciona dentro do <form></form>tem algum que funcione ?

[wesleymoser 0]

desculpe me retificando... ele funciona dentro do form sim... mas não sei porque acontece em certos pontos da página principalmente dentro de tables ele não funciona ! até obrgiado ou se tá me devendo aquela do AJAX lembra... hehehehhehaté

[Fleury 3]

se foi aquele que no final das contas ninguém respondeu, inclusive eu, é por ninguém soube resolver, inclusive eu. heheh

[wesleymoser 0]

Bom vou explicar exatamente oque estou querendo.Tenho um cadastro de empresa. e um cadastro de contatosQuando estou cadastrando a empresa no final tem o cadastro de contato na mesma tela.Dai quero adicionar mais um contato ao cadastro. Faço o seguinte. Copio e colo vários forms do contato.e quero fazer que todos fiquem invisíveis, daí por um botão "+" faço ele aparecer , como se tivesse adicionando mais um campo para digitar o contato. Estou pensando em limitar em 20 adicionais.Não encontrei nenhuma outra forma de fazer isso .... meu patrão que tá querendo assim.... então tenho que achar uma maneira de fazer assim.

[Fleury 3]

Tem forma melhores de se fazer isso... mas se você quiser assim, aí vai.

 

<script language="JavaScript" type="text/javascript">var idx = 0;function showCadContato() {  if (idx <= 20) {	idx++;	eval("document.getElementById('contato-"+idx+"').style.display = 'block'");  }}</SCRIPT>

Exemplo de uso:

<INPUT name="oi" type="button" value="+" onClick="showCadContato();" /><DIV id="contato-1" style="display: none"><INPUT type="text"></DIV><DIV id="contato-2" style="display: none"><INPUT type="text"></DIV><DIV id="contato-3" style="display: none"><INPUT type="text"></DIV><DIV id="contato-4" style="display: none"><INPUT type="text"></DIV><DIV id="contato-5" style="display: none"><INPUT type="text"></DIV><DIV id="contato-6" style="display: none"><INPUT type="text"></DIV><DIV id="contato-7" style="display: none"><INPUT type="text"></DIV><DIV id="contato-8" style="display: none"><INPUT type="text"></DIV>

=Testado=

- OK

- OK

- OK

[wesleymoser 0]

<link rel="stylesheet" type="text/css" href="..\css.css"><? // recupera valor do hotel para trazer para hotel_combo$id_recupera = $_GET["id"];$nome_recupera = $_GET["hotel"];// Bando de Dados$connection = mysql_connect($db_host, $db_user, $db_pass) or die(mysql_error());mysql_select_db($db_nome,$connection) or die(mysql_error()); // Seleciona nome de hoteis$query_hoteis = "SELECT * FROM hotel ORDER BY hotel ASC";$list_hoteis = mysql_query($query_hoteis, $connection) or die(mysql_error());//$list_linha_hoteis = mysql_fetch_assoc($list_hoteis);// Seleciona nome de para trazer para hotel_combo$query_hoteis_recupera = "SELECT * FROM hotel WHERE id = '$id_recupera' LIMIT 1 ";$list_hoteis_recupera = mysql_query($query_hoteis_recupera, $connection) or die(mysql_error());$list_linha_hoteis_recupera = mysql_fetch_assoc($list_hoteis_recupera);// Seleciona nome de Apartamento$query_apartamento = "SELECT nome_apto FROM apartamento ORDER BY id_apto ASC";$list_apartamento = mysql_query($query_apartamento, $connection) or die(mysql_error());$list_linha_apartamento = mysql_fetch_assoc($list_apartamento);// Seleciona nome de Regime$query_regime = "SELECT nome_regime FROM regime ORDER BY id_regime ASC";$list_regime = mysql_query($query_regime, $connection) or die(mysql_error());$list_linha_regime = mysql_fetch_assoc($list_regime);// Seleciona nome de Tipo$query_tipo = "SELECT nome_tipo FROM tipo ORDER BY id_tipo ASC";$list_tipo = mysql_query($query_tipo, $connection) or die(mysql_error());$list_linha_tipo = mysql_fetch_assoc($list_tipo);?><div align="left"><em><? include "../menu.php"; ?></em></div><p><table width="100%" border="0" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF"><span class="titulo">Cadastro de Tarifário de Hoteis</span><br><br><span class="fonte5">O (*) do formulário indica "Campo Obrigatório"</span><br><br><form name="cad_tarifarios" method="post" action="add_tarifario.php">  <tr>	<td bgcolor="#EBEBEB"><span class="fonte2"> Hotel:</span></td>	<td width="857" bgcolor="#F4F4F4">			<select name="hotel_combo" span class="fonte3" id="hotel_combo" onChange="java script:Atualiza_consulta_tarifario(this.value)">	<? if($id_recupera <= 0) { 	echo "<option value=\" \" selected>Escolha</option>";	} else { 	echo "<option value=\"$list_linha_hoteis_recupera[id]\" selected>$list_linha_hoteis_recupera[hotel]</option>";	} ?>	<? while($list_linha_hoteis=mysql_fetch_array($list_hoteis)) { ?> 	<option value=" <? echo $list_linha_hoteis['id'];?>"><b><? echo $list_linha_hoteis['hotel'];?></b></option> 	<? } ?> 		</select>	<a href=hoteis.php><span class="fonte">I | </span></a>	<a href=java script:Atualiza_consulta_tarifario(this.value)><span class="fonte">A</span></a><span class="mensagem">  *</span>	</td>  </tr>	  <tr>	  <td colspan="2" bgcolor="#EBEBEB"><table width="51%" border="0">	  <tr>		<td width="40%">		  <div align="left"><span class="fonte2">Taxa de Serviço:</span><span class="fonte2"></span>			  <input name="tx_servico" type="text" class="fonte3" value="" size="10" maxlength="10" onkeypress="return MaskPERCENT(this, event)"> 		  </div></td>		<td width="28%"><div align="left"><span class="fonte2">ISS:</span>			  <input name="iss" type="text" class="fonte3" value="" size="10" maxlength="10" onkeypress="return MaskPERCENT(this, event)"> 		</div></td>		<td width="32%">		  <div align="left"><span class="fonte2">Taxa Turismo:</span>			  <input name="tx_turismo" type="text" class="fonte3" value="" size="10" maxlength="10" OnKeyDown="FormataValor(this,event,15,2)">		  </div></td>	  </tr>	</table>			</td>	</tr>  	<tr>	  <td bgcolor="#EBEBEB"><span class="fonte2">Tarifa:</span></td>	<td bgcolor="#F4F4F4"><table border="0">	  <tr>		<td><input name="tarifa_comi" type="text" class="fonte3" value="" size="10" maxlength="10" onKeyPress="return MaskPERCENT(this, event)"></td>		<td><div name="tarifa_div" id="tarifa_div"></div></td>	  </tr>	</table>	  	  </td>	</tr>  	  <tr>		<td colspan="2" bgcolor="#EBEBEB"><table width="100%" border="0">		<tr>		  <td><span class="fonte2">Validade da Tarifa: </span></td>		  <td><span class="fonte2">Tipo:</span></td>		  <td><span class="fonte2">Regime:</span></td>		  <td><span class="fonte2">Apartamentos:</span></td>		  <td><span class="fonte2">Dias da Semana:</span></td>		  <td> </td>		</tr>		<tr>		  <td><input type="text" name="dataini" size="10" maxlength="10" span class="fonte3" onkeypress="return MaskDATA(this, event)">			<span class="fonte">à</span>			<input type="text" name="datafim" size="10" maxlength="10" span class="fonte3" onkeypress="return MaskDATA(this, event)"></td>		  <td><div nome="tipo_div" id="tipo_div"></div></td>		  <td><div name="regime_div" id="regime_div"></div></td>		  <td><table cellpadding="1" cellspacing="0">			<tr align="center">			  <td bgcolor="#F4F4F4"><span class="fonte2">SGL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">DBL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">TWN</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">TPL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">QUA</span></td>			</tr>			<tr align="center">			  <td bgcolor="#F4F4F4"><input name="tx_sgl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_dbl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_twn" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_tpl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_qua" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			</tr>		  </table></td>		  <td><table width="200" border="0" cellpadding="0" cellspacing="0" span class="fonte2" bgcolor="#FFFFFF">			<tr>			  <td bgcolor="#EBEBEB"><div align="center">D</div></td>			  <td bgcolor="#EBEBEB"><div align="center">S</div></td>			  <td bgcolor="#EBEBEB"><div align="center">T</div></td>			  <td bgcolor="#EBEBEB"><div align="center">Q</div></td>			  <td bgcolor="#EBEBEB"><div align="center">Q</div></td>			  <td bgcolor="#EBEBEB"><div align="center">S</div></td>			  <td bgcolor="#EBEBEB"><div align="center">S</div></td>			</tr>			<tr align="center">			  <td bgcolor="#F4F4F4"><input type="checkbox" name="dom" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="seg" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="ter" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="qua" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="qui" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="---" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="sab" value="1"></td>			</tr>		  </table>		  </td>		  <td>			  </div>		  </td>		</tr>	  </table>	  </td>  </tr>  <!-- começa aqui a 1º div -->  <INPUT name="oi" type="button" value="+" onClick="showCadContato();"><DIV id="contato-1" style="display: none">	<tr bgcolor="#EBEBEB">	  <td colspan="2"> 		  <tr>		<td colspan="2" bgcolor="#EBEBEB"><table width="100%" border="0">		<tr>		  <td><span class="fonte2">Validade da Tarifa: </span></td>		  <td><span class="fonte2">Tipo:</span></td>		  <td><span class="fonte2">Regime:</span></td>		  <td><span class="fonte2">Apartamentos:</span></td>		  <td><span class="fonte2">Dias da Semana:</span></td>		  <td> </td>		</tr>		<tr>		  <td><input type="text" name="dataini" size="10" maxlength="10" span class="fonte3" onkeypress="return MaskDATA(this, event)">			<span class="fonte">à</span>			<input type="text" name="datafim" size="10" maxlength="10" span class="fonte3" onkeypress="return MaskDATA(this, event)"></td>		  <td><div nome="tipo_div" id="tipo_div"></div></td>		  <td><div name="regime_div" id="regime_div"></div></td>		  <td><table cellpadding="1" cellspacing="0">			<tr align="center">			  <td bgcolor="#F4F4F4"><span class="fonte2">SGL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">DBL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">TWN</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">TPL</span></td>			  <td bgcolor="#F4F4F4"><span class="fonte2">QUA</span></td>			</tr>			<tr align="center">			  <td bgcolor="#F4F4F4"><input name="tx_sgl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_dbl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_twn" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_tpl" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			  <td bgcolor="#F4F4F4"><input name="tx_qua" type="text" class="fonte3" size="8" maxlength="8" OnKeyDown="FormataValor(this,event,13,2)"></td>			</tr>		  </table></td>		  <td><table width="200" border="0" cellpadding="0" cellspacing="0" span class="fonte2" bgcolor="#FFFFFF">			<tr>			  <td bgcolor="#EBEBEB">D</td>			  <td bgcolor="#EBEBEB">S</td>			  <td bgcolor="#EBEBEB">T</td>			  <td bgcolor="#EBEBEB">Q</td>			  <td bgcolor="#EBEBEB">Q</td>			  <td bgcolor="#EBEBEB">S</td>			  <td bgcolor="#EBEBEB">S</td>			</tr>			<tr align="center">			  <td bgcolor="#F4F4F4"><input type="checkbox" name="dom" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="seg" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="ter" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="qua" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="qui" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="---" value="1"></td>			  <td bgcolor="#F4F4F4"><input type="checkbox" name="sab" value="1"></td>			</tr>		  </table>		  </td>		  <td>		  </td>		</tr>	  </table>	  </td>	</td>  </tr><INPUT type="text"></DIV><!-- Fim da 1º div --><DIV id="contato-2" style="display:none"><INPUT type="text"></DIV><DIV id="contato-3" style="display:none"><INPUT type="text"></DIV><DIV id="contato-4" style="display:none"><INPUT type="text"></DIV><DIV id="contato-5" style="display:none"><INPUT type="text"></DIV><DIV id="contato-6" style="display:none"><INPUT type="text"></DIV><DIV id="contato-7" style="display:none"><INPUT type="text"></DIV><DIV id="contato-8" style="display:none"><INPUT type="text"></DIV>    	<tr>	  <td colspan="2">	  <div align="center"><input name="cadastrar" type="submit" value="Cadastrar"></div>	  </td>	</tr></table></form>	<!--div name="consulta_tarifario_div" id="consulta_tarifario_div"></div -->

O código da página é esta.. tirei algumas funções de cabeçalho, para ficar menos código, mas acho que não ficou...

 

Bom, quando insiro só inputs funciona beleza.... mas quando uso mais coisas. com está no código ai, não aparece nada....

 

Mas um detalhe que percebi.... é que o input que coloquei sózinho aparece... estranho...!

 

bom acho que você vai saber oque está acontecendo.

 

Coloquei a função no arquivo js.js, mas não está no cabeçalho.... porque tirei e blablalbla...

[Fleury 3]

Não tem erro nenhum...

<DIV id="contato-1" style="display:none"> nome: <INPUT type="text" name="nome1"><br> telefone: <INPUT type="text" name="tel1"><br> endereço: <INPUT type="text" name="end1"></DIV><DIV id="contato-2" style="display:none"> nome: <INPUT type="text" name="nome2"><br> telefone: <INPUT type="text" name="tel2"><br> endereço: <INPUT type="text" name="end2"></DIV><DIV id="contato-3" style="display:none"> nome: <INPUT type="text" name="nome3"><br> telefone: <INPUT type="text" name="tel3"><br> endereço: <INPUT type="text" name="end3"></DIV><DIV id="contato-4" style="display:none"> nome: <INPUT type="text" name="nome4"><br> telefone: <INPUT type="text" name="tel4"><br> endereço: <INPUT type="text" name="end4"></DIV>

você não está sabendo montar seu div.

[wesleymoser 0]

DEsculpe cara... acho que não consegui me expressar direito...Seguinte... quando coloco tabelas, e tudo mais. tipo outras divs, e o conteudo que está no código... dai não funciona.posso realmente não estar sabendo como montar a div, mas precisava que você me ajudasse com esse problema...mas pode crer que to tentando muito fazer isso funcionar....

[Fleury 3]

Posta seu código então pois olha só, testei com divs e tabela e deu mesmo assim... Segue o código html do teste:

 

<DIV id="contato-1" style="display:none"><TABLE width="200" border="0">  <TR>	<TD>nome:</TD>	<TD><INPUT type="text" name="nome1"></TD>  </TR>  <TR>	<TD>telefone:</TD>	<TD><INPUT type="text" name="tel1"></TD>  </TR>  <TR>	<TD>endereço:</TD>	<TD><INPUT type="text" name="end1"></TD>  </TR></TABLE></DIV><BR /><DIV id="contato-2" style="display:none"> nome: <INPUT type="text" name="nome2"><BR> telefone: <INPUT type="text" name="tel2"><BR> endereço: <INPUT type="text" name="end2"></DIV><BR /><DIV id="contato-3" style="display:none">	<div align="left">		<TABLE width="200" border="0">			<TR>				<TD>nome:</TD>				<TD><INPUT type="text" name="nome1"></TD>			</TR>			<TR>				<TD>telefone:</TD>				<TD><INPUT type="text" name="tel1"></TD>			</TR>			<TR>				<TD>endereço:</TD>				<TD><INPUT type="text" name="end1"></TD>			</TR>		</TABLE>	</div></DIV><BR /><DIV id="contato-4" style="display:none"><div> nome: <INPUT type="text" name="nome4"></div><div> telefone: <INPUT type="text" name="tel4"></div><div> endereço: <INPUT type="text" name="end4"></div></DIV>

[wesleymoser 0]

Consegui cara.,.... desculpe a manézisse minha..... hahahahahhaagora... só pra abusar.... como faço um botão para desaparecer os botões que já apareceram ?hahahahahhaha foi mal.....

[Fleury 3]

Aí está... a função antiga foi atualizada também.

 

<script language="JavaScript" type="text/javascript">var idx = 0;function showCadContato() {  if (idx <= 20) {	idx++;		if (eval("document.getElementById('contato-"+idx+"')")		eval("document.getElementById('contato-"+idx+"').style.display = 'block'");  }}function hideCadContatos() {  for (var k = 1; k <= 20; k++) {		if (eval("document.getElementById('contato-"+k+"')")		eval("document.getElementById('contato-"+k+"').style.display = 'none'");  }}</SCRIPT>

Exemplo de uso:

<INPUT name="fechar" type="button" value="fechar todos" onClick="hideCadContatos();" />

[wesleymoser 0]

esse script que você passou não fazer aparecer.....

 

não sei oque aconteceu ?

 

 

dá erro de javascript quando clico no botão "+" tipo dá erro de objeto esperado !

 

 

<script>var idx = 0;function showCadContato() {  if (idx <= 1) {	idx++;		if (eval("document.getElementById('contato-"+idx+"')")		eval("document.getElementById('contato-"+idx+"').style.display = 'block'");  }}function hideCadContato() {  for (var k = 1; k <= 1; k++) {		if (eval("document.getElementById('contato-"+k+"')")		eval("document.getElementById('contato-"+k+"').style.display = 'none'");  }}</script><INPUT name="oi" type="button" value="+" onClick="showCadContato();"><INPUT name="oi" type="button" value="-" onClick="hideCadContato();"><DIV id="contato-1" style="display:none"></DIV>

 

No caso fiz a parada pra funcionar só para mostrar 1 , só pra testar..

 

 

Cara, não sei como você aguenta um cara como eu..... to sendo muito chato no fórum....

[Fleury 3]

1º - O nome do div deve começar pelo "contato-1"

2º - O botão de esconder, não esconde 1 por 1. Esconde todos de uma vez.

3º - Atualização da rotina de esconder:

function hideCadContato() {  for (var k = 1; k <= 1; k++) {		if (eval("document.getElementById('contato-"+k+"')")		eval("document.getElementById('contato-"+k+"').style.display = 'none'");  }  idx = 0;}