Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

LeonardoMartinez

Formulário de Contato

Por , em Javascript

Recommended Posts

LeonardoMartinez    0

LeonardoMartinez
Postado

Olá pessoal!

Esse é o meu primeiro tópico aqui no fórum e gostaria de pedir a ajuda de vocês com um script do java que to tentando implementar no WordPress como widget de texto na sidebar mas não estou tendo sucesso.

 

A ideia é o seguinte, ter um formulário de contato na sidebar baseado na escolha de quem acessa o site. Então eu tenho algumas opções para a pessoa e numa opção única o formulário é diferente, na opção "Vender". Então eu criei uma caixa de seleção e baseada na opção ativa ele me mostra um código de um plugin que é onde criei o formulário de contato e ai o WordPress interpreta esse código e renderiza o formulário.

 

O problema é o seguinte, no código abaixo eu criei com IF e ELSE as condições, mas ele está mostrando os dois formulários ao mesmo tempo, sendo que deveria mostrar um ou outro e quando o usuário mudasse de opção, o formulário anterior sumisse.

<script type="text/javascript">
function optionCheck(){var option = document.getElementById("options").value;


IF (option == "anunciar" || "avaliacao" || "comprar" || "duvida" || "outroassunto" || "parceria" || "sugestao"){
document.getElementById("form1").style.visibility ="visible"; document.getElementById("form2").style.visibility ="hidden";}


ELSE (option == "anunciar" || "avaliacao" || "comprar" || "duvida" || "outroassunto" || "parceria" || "sugestao"){
document.getElementById("form2").style.visibility ="visible"; document.getElementById("form1").style.visibility ="hidden";}
</script>


<select id="options" onchange="optionCheck()">
<option value="anunciar">Anunciar</option>
<option value="avaliacao">Avaliação</option>
<option value="comprar">Comprar</option>
<option value="duvida">Dúvida</option>
<option value="outroassunto">Outro Assunto</option>
<option value="parceria">Parceria</option>
<option value="sugestao">Sugestão</option>
<option value="vender">Vender</option>
</select>


<div id="form1" style="height:50px;width:300px;border:1px;visibility:visible;">
[si-contact-form form='4']
</div>


<div id="form2" style="height:50px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='3']
</div>

Já no código abaixo eu consegui fazer o formulário sumir quando o usuário trocar de opção, porém, ele renderiza um "abaixo do outro", como se o anterior ainda estivesse sendo mostrado.

<script type="text/javascript">function optionCheck(){var option = document.getElementById("options").value;


if(option == "anunciar"){document.getElementById("anunciar").style.visibility ="visible";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "avaliacao"){document.getElementById("avaliacao").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "comprar"){document.getElementById("comprar").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "duvida"){document.getElementById("duvida").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "outroassunto"){document.getElementById("outroassunto").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "parceria"){document.getElementById("parceria").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "sugestao"){document.getElementById("sugestao").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("vender").style.visibility ="hidden";}


if(option == "vender"){document.getElementById("vender").style.visibility ="visible";
document.getElementById("anunciar").style.visibility ="hidden";
document.getElementById("avaliacao").style.visibility ="hidden";
document.getElementById("comprar").style.visibility ="hidden";
document.getElementById("duvida").style.visibility ="hidden";
document.getElementById("outroassunto").style.visibility ="hidden";
document.getElementById("parceria").style.visibility ="hidden";
document.getElementById("sugestao").style.visibility ="hidden";}}
</script>


<select id="options" onchange="optionCheck()">
<option value="anunciar">Anunciar</option>
<option value="avaliacao">Avaliação</option>
<option value="comprar">Comprar</option>
<option value="duvida">Dúvida</option>
<option value="outroassunto">Outro Assunto</option>
<option value="parceria">Parceria</option>
<option value="sugestao">Sugestão</option>
<option value="vender">Vender</option>
</select>


<div id="anunciar" style="height:0px;width:300px;border:1px;visibility:visible;">
[si-contact-form form='4']
</div>


<div id="avaliacao" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="comprar" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="duvida" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="outroassunto" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="parceria" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="sugestao" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='4']
</div>


<div id="vender" style="height:0px;width:300px;border:1px;visibility:hidden;">
[si-contact-form form='3']
</div>

Seguem imagens para entenderem o que acontece com esse 2º script.

 

http://narguilebr.com.br/wp-content/uploads/2016/05/screencapture-narguilebr-com-br-1462394703322.png

http://narguilebr.com.br/wp-content/uploads/2016/05/screencapture-narguilebr-com-br-1462394739077.png

http://narguilebr.com.br/wp-content/uploads/2016/05/screencapture-narguilebr-com-br-1462395024496.png

 

 

Alguém consegue me dizer onde estou errando? Ainda não tenho tanta prática com programação.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito