Zaloguj | Zarejestruj | FAQ
Anonymous

Mostrar/Ocultar formulários

+ Odpowiedz

Posty: 2 Strona 1 z 1


Mostrar/Ocultar formulários

przez mateuslara » Śr cze 18, 2014 3:17 am

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
Kod: Zaznacz cały
<!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>
Avatar użytkownika

mateuslara

  • Posty: 1
  • Dołączył(a): Śr cze 18, 2014 3:08 am

Re: Mostrar/Ocultar formulários

przez XainPro » Wt cze 24, 2014 7:53 am

<!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 formShow(formID){
switch(formID) {
case 1:
document.getElementById('contact-form1').style.display = 'block';
document.getElementById('contact-form2').style.display = 'none';
break;
case 2:
document.getElementById('contact-form1').style.display = 'none';
document.getElementById('contact-form2').style.display = 'block';
break;
}
}

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">
<button id="Div1" class="naoclicada" onClick="formShow('1')">EMPRESARIAL</button>
<button id="Div2" class="naoclicada" onClick="formShow('2')">PESSOAL</button>
</div>
<button onClick="formShow(1)">EMPRESARIAL</button>
<button onClick="formShow(2)">PESSOAL</button>
</div>
<div id="contact-form1">
<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>
</div>
<div id="contact-form2">
<form 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>
</div>


</body>
</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1