Esconder/Ocultar formulário

Mateus Lara · 18 de junho de 2014

Boa noite, tenho dois formulários e duas opções pro usuário escolher.

PESSOAL

EMPRESARIAL

caso escolha pessoal aparece um formulário, caso escolha empresarial outro. Já pesquisei e achei códigos que fazem isso, porém quando implemento com o que preciso não funciona. O que preciso é que nesse PESSOAL e EMPRESARIAL, quando clicado mude a aparência e mostre o formulário.

Segue o código

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">.menu{position: absolute; left: 555px; top:197px; line-height:2.22em;width: 278px; height: 34px;font-size:28px;color:#000;font-family:"InsaniburgerwithCheese", Arial, Helvetica, sans-serif;}.naoclicada{display:inline-block;width:210px; height:27px;font-size:17px;line-height:1.92em;margin-top:10px;color:#000;background:#00AFEF;text-align:center;border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px}.clicada{display:inline-block;width:259px; height:46px;font-size:22px;margin:-30px;line-height:1.92em;letter-spacing: 0.09em; margin:2pxs;color:#fff;background:#FF143F;text-align:center;border-radius:0 18px 88px 0;-moz-border-radius:0 18px 88px 0;-webkit-border-radius:0 18px 88px 0}#contact-form input{position:absolute; background:#111927; border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:2px; border:hidden; height:23px; color:#FFF}#contact-form textarea{   position: absolute;   background: #111927; border-radius: 8px; -moz-border-radius: 8px;-webkit-border-radius: 2px;border: hidden;height: 80px;color: #FFF}.checkbox{   position: absolute;   border-radius: 8px; -moz-border-radius: 8px;-webkit-border-radius: 2px;border: hidden;height: 80px;color: #FFF; height:90px; width:100px;}.nome {position:absolute; left: 848px; top:174px; }.assunto {position:absolute; left:1060px; top:174px;}.email {position:absolute; left: 848px; top:214px;}.find {position:absolute; left: 1060px; top:214px;}.tel {position:absolute; left:848px; top:259px;}.msg {position:absolute; left:848px; top:299px;}</style><script type="text/javascript">function id(el) {   return document.getElementById(el);}function mostra() {   id('contact-form').style.display = 'none';   id('contact-form1').style.display = 'block';}function esconde() {   id('contact-form').style.display = 'block';   id('contact-form1').style.display = 'none';}function changeClass(e){      try{var element = e.target        }catch(er){};      try{var element = event.srcElement  }catch(er){};            for(var i=0; i<document.getElementById('parent').childNodes.length; i++)         if(document.getElementById('parent').childNodes[i].nodeType == 1)            document.getElementById('parent').childNodes[i].className = 'naoclicada';                  element.className = 'clicada';   }   window.onload = function(){            for(var i=0; i<document.getElementById('parent').childNodes.length; i++)         if(document.getElementById('parent').childNodes[i].nodeType == 1)                        document.getElementById('parent').childNodes[i].onclick = changeClass;               }</script></head><body>    <div class="titulo">        <div class="titulo1">            FALE CONOSCO      </div>    </div>    <div class="menu">        <div id="parent">         <div id="Div1" class="naoclicada" onclick="javascript:mostra();">EMPRESARIAL</div>         <div id="Div2" class="naoclicada" onclick="javascript:esconde();">PESSOAL</div>      </div></div><form id="contact-form" action="envia.php" method="post" enctype="multipart/form-data">    <div class="nome">       <input type="text" size="29">    </div>    <div class="assunto">       <input type="text" size="29">    </div>   <div class="email">    <input type="email" size="29">    </div>    <div class="find">    <input type="text" size="29">    </div>    <div class="tel">    <input type="tel" size="29">    </div>    <div class="msg">   <textarea cols="49" rows="30"></textarea>    </div>      </form>            <form id="contact-form1" action="envia.php" method="post" enctype="multipart/form-data">    <div class="tel">    <input type="tel" size="29">    </div>    <div class="msg">   <textarea cols="49" rows="30"></textarea>    </div>    <div class="newsletter">    <div class="checkbox">    <input type="checkbox">    </div>    </form></body></html>

Arley Fellipe · 18 de junho de 2014

Olá meu conselho é organizar adequadamente para o desenvolvimento prosseguir sem atrasos, no seu código percebi que você usa o nome da id das divs de forma aleatória quando eu desenvolvo um site eu faço assim veja:

<html>//e só um exemplo para entender o que eu quis dizer <div id="div_conta_pessoal"><form></form></div><div id="div_conta_empresarial"><form></form></div></html>

Com isso tendo as divs cada uma com seu objetivo ai vem o que você quer e mostrar a div que o visitante quer e ocultar a outra
;

é só criar uma função para ocultar uma e mostrar a outra assim:

<script type="javascript">function mostrar(){document.getElementById('id_da_div').style.visibility = 'hidden';}function ocultar(){document.getElementById('id_da_div').style.visibility = 'visible';}</script>

Use sua criatividade e boa sorte!

Mateus Lara · 18 de junho de 2014

Olá meu conselho é organizar adequadamente para o desenvolvimento prosseguir sem atrasos, no seu código percebi que você usa o nome da id das divs de forma aleatória quando eu desenvolvo um site eu faço assim veja:
<html>//e só um exemplo para entender o que eu quis dizer <div id="div_conta_pessoal"><form></form></div><div id="div_conta_empresarial"><form></form></div></html>
Com isso tendo as divs cada uma com seu objetivo ai vem o que você quer e mostrar a div que o visitante quer e ocultar a outra

;

é só criar uma função para ocultar uma e mostrar a outra assim:
<script type="javascript">function mostrar(){document.getElementById('id_da_div').style.visibility = 'hidden';}function ocultar(){document.getElementById('id_da_div').style.visibility = 'visible';}</script>
Use sua criatividade e boa sorte!

Entendi, vou dar uma organizada melhor aqui e vejo se consigo!

Valeu abraços!