Mostrar campos ao selecionar valor de Select

[carol=) 0]

Oi pessoal, sou eu de novo http://forum.imasters.com.br/public/style_emoticons/default/cry.gif No meu último tópico (primeiro também) eu aprendi a fazer uma condição que para checar um campo apenas quando ele estiver habilitado. Eu queria saber o que tenho que fazer se quiser aumentar o formulário, e inserir outros campos.Por exemplo, como ficaria o if se eu quisesse checar (validar) aquele formulário mas quisesse também incuir os seguintes campos:Nome ----> textoE-Mail ----> emailComo encontrou nosso site ----> selectOutro -----> textoCidade -----> textoEstado -----> selectSua opinião -----> área de texto (textarea)Alguém me ajuda de novo?[Caso o link para o meu post não funcione, incluí aqui o código/solução do Adriano Alves]

<script language="JavaScript" type="text/JavaScript">function Submeter() {if (document.getElementById("comoencontrou").value=="") {alert("Preencha o campo SITE!");return false;} else if ((document.getElementById("comoencontrou").value=="3") && (document.getElementById("outro").value=="")) {alert("Preencha a outra forma que conheceu nosso site!");return false;}}function Habilitar() {if (document.getElementById("comoencontrou").value=="3") {document.getElementById("outro").disabled=false;document.getElementById("outro").focus();} else {document.getElementById("outro").disabled=true;}}</script>

e

<form action="formulario.php" method="post" name="form" onSubmit="return Submeter();"><label for="comoencontrou">Como encontrou nosso site?</label><br /><select name="comoencontrou" id="comoencontrou" onChange="Habilitar();"><option value="" selected="selected">Selecione</option><option value="1">Google</option><option value="2">Yahoo</option><option value="3">Outro (Informe abaixo)</option></select><br /><br /><label for="outro">Outro:</label><br /><input type="text" name="outro" id="outro" size="50" maxlength="100" disabled="disabled" /><br /><br /><input type="submit" name="Submit" value="Enviar" id="Submit"></form>

[Fleury 3]

Oi Carol! =)Esses novos campo vão aparecer depois que o usuário fizer o que?

[carol=) 0]

Oi Fleury :D Não, eu queria apenas aumentá-lo mesmo, e que cada campo tivesse sua validação, mas queria manter a função de habilitar/desabilitar o menu "outros" de acordo com o menu "Como encontrou" de cima.

[Fleury 3]

Mas tipo, quando o usuário selecionar a opção "Outros", daí o campo de texto "outro" habilita e outros campo vão surgir? É issu?

[Fleury 3]

:wacko:

O cara é muito mais rápido no gatilho que eu!

Um dia eu chego lá http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

[carol=) 0]

Não, veja bem, eu queria todos os campos aparecendo, menos o campo Outros (que seria habilitado de acordo com a opção do menu "Como encontrou").Mas o que eu quer saber é como validar os outros campos, tipo

seo campo "nome" estiver vazioalerta "Preencha o campo nome"seo campo "email" não for válidoalerta "Digite um email válido"{seo campo "como encontrou" estiver como "selecione"alerta "Selecione um campo"Mas seo campo "selecione" estiver em "outro"habilite o campo "outro"Aí se o campo "outro" estiver vazioAlerta "Preencha o campo outros"}Se o campo Cidade estiver vazioAlerta "Diga o nome de sua cidade"Se o campo Estado não estiver selecionadoAlerta "selecione seu estado"Se o campo "Sua opinião" estiver vazioAlerta "O campo 'sua opinião' está vazio"

Entenderam? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif :blink:

[filipescoob 1]

Salve...Kara você é fera...Muito boa essa dica... fallowwwwwwww....fui

[carol=) 0]

Mas aí como ficaria o primeiro if para validar esses campos?Essa parte aqui:function Submeter() {if (document.getElementById("comoencontrou").value=="") {alert("Preencha o campo SITE!");return false;} else if ((document.getElementById("comoencontrou").value=="3") && (document.getElementById("outro").value=="")) {alert("Preencha a outra forma que conheceu nosso site!");return false;}}

[Fleury 3]

Tem esse aqui pronto:

http://forum.imasters.com.br/index.php?showtopic=161507

[carol=) 0]

Ok, meninos, valeu,vou tentar fazer e qualquer coisa volto a encher a paciência de vocês. :D

[Fleury 3]

Que nada! Ter uma presença feminina nesse fórum onde só aparece cueca é um privilégio! ^_^

[carol=) 0]

Que nada! Ter uma presença feminina nesse fórum onde só aparece cueca é um privilégio! happy.gif

:D

 

Então vamos lá de novo:

 

Será que alguém pode testar o código abaixo? Estou com dois problemas com ele:

 

1. Quando o campo nome está oculto, mesmo o usuário tendo preenchido todos os formulários, e selecionado "Google" por exemplo no campo "ondeencontrou", ele retorna a mensagem "Preencha o campo Outro"

 

2. Peguei esse scrip no post do Adriano acima e queria dar uma limpada nele, acho que tem uns "case" que eu não preciso no Formulário. Por exemplo, eu preciso daquele

 

case "select-multiple":

if (obj.selectedIndex == -1){

alertMsg += " - " + fieldDescription + "\n";

??????

 

O código inteiro (ta quase saindo, só mais um pouquinho de poaciência comigo pq nesse negócio de JavaScript eu sou muito fraca http://forum.imasters.com.br/public/style_emoticons/default/cry.gif )

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Formulário</title>

 

<script type="text/JavaScript">

function Habilitar() {

if (document.getElementById("comoencontrou").value=="3") {

document.getElementById("oculto").style.display="block";

document.getElementById("outro").focus();

} else {

document.getElementById("oculto").style.display="none";

}

}

 

function formCheck(formobj){

// Enter name of mandatory fields

var fieldRequired = Array("nome", "email", "comoencontrou", "outro", "ramo", "cidade", "estado", "opine");

// Enter field description to appear in the dialog box

var fieldDescription = Array("Nome", "E-Mail", "Como encontrou nosso site", "Outro", "Ramo de atividade", "Cidade", "Estado", "Opinião");

// dialog message

 

var alertMsg = "Por favor, preencha os determinados campos:\n";

 

var l_Msg = alertMsg.length;

 

for (var i = 0; i < fieldRequired.length; i++){

var obj = formobj.elements[fieldRequired];

if (obj){

switch(obj.type){

case "select-one":

if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){

alertMsg += " - " + fieldDescription + "\n";

}

break;

case "select-multiple":

if (obj.selectedIndex == -1){

alertMsg += " - " + fieldDescription + "\n";

}

break;

case "text":

case "textarea":

if (obj.value == "" || obj.value == null){

alertMsg += " - " + fieldDescription + "\n";

}

break;

default:

}

if (obj.type == undefined){

var blnchecked = false;

for (var j = 0; j < obj.length; j++){

if (obj[j].checked){

blnchecked = true;

}

}

if (!blnchecked){

alertMsg += " - " + fieldDescription + "\n";

}

}

}

}

 

if (alertMsg.length == l_Msg){

return true;

}else{

alert(alertMsg);

return false;

}

}

// -->

</script>

 

</head>

 

<body>

<form action="formulario.php" method="post" name="form" onsubmit="return formCheck(this);">

 

<label for="nome">Nome:</label><br />

<input name="nome" type="text" id="nome" size="50" maxlength="100" /><br /><br />

 

<label for="email">E-Mail:</label><br />

<input type="text" name="email" id="email" size="50" maxlength="100"/><br /><br />

 

<label for="comoencontrou">Como encontrou nosso site:</label><br />

<select name="comoencontrou" id="comoencontrou" onchange="Habilitar()">

<option value="" selected="selected">Selecione</option>

<option value="1">Google</option>

<option value="2">Yahoo</option>

<option value="3">Outro</option>

</select><br /><br />

 

<div id="oculto" style="display:none;">

<label for="outro">Outro:</label><br />

<input type="text" name="outro" id="outro" size="50" maxlength="100" /><br /><br />

</div>

 

<label for="ramo">Ramo de atividade:</label><br />

<input type="text" name="ramo" id="ramo" size="50" maxlength="100" /><br /><br />

 

<label for="cidade">Cidade:</label><br />

<input type="text" name="cidade" id="cidade" size="50" maxlength="100" /><br /><br />

 

<label for="estado">Estado:</label><br />

<select name="estado" id="estado">

<option value="" selected="selected">Selecione</option>

<option value="AC">AC</option>

<option value="AL">AL</option>

<option value="AM">AM</option>

<option value="BA">BA</option>

<option value="CE">CE</option>

<option value="DF">DF</option>

<option value="ES">ES</option>

<option value="GO">GO</option>

<option value="MA">MA</option>

<option value="MG">MG</option>

<option value="MS">MS</option>

<option value="MT">MT</option>

<option value="PA">PA</option>

<option value="PB">PB</option>

<option value="PE">PE</option>

<option value="PI">PI</option>

<option value="PR">PR</option>

<option value="RJ">RJ</option>

<option value="RN">RN</option>

<option value="RO">RO</option>

<option value="RR">RR</option>

<option value="RS">RS</option>

<option value="SC">SC</option>

<option value="SP">SP</option>

<option value="TO">TO</option>

</select><br /><br />

 

<label for="opine">Opinião</label><br />

<textarea name="opine" id="opine" cols="50" rows="10"></textarea><br /><br />

 

<input type="submit" name="submit" id="submit" value="Enviar">

 

</form>

<body>

</html>

[Fleury 3]

Isso deve resolver:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Formulário</title><script type="text/JavaScript">function Habilitar() {if (document.getElementById("comoencontrou").value=="3") {document.getElementById("oculto").style.display="block";document.getElementById("outro").focus();} else {document.getElementById("oculto").style.display="none";}}function formCheck(formobj){// Enter name of mandatory fieldsvar fieldRequired = Array("nome", "email", "comoencontrou", "outro", "ramo", "cidade", "estado", "opine");// Enter field description to appear in the dialog boxvar fieldDescription = Array("Nome", "E-Mail", "Como encontrou nosso site", "Outro", "Ramo de atividade", "Cidade", "Estado", "Opinião");// dialog messagevar alertMsg = "Por favor, preencha os determinados campos:\n";var l_Msg = alertMsg.length;for (var i = 0; i < fieldRequired.length; i++){var obj = formobj.elements[fieldRequired[i]];if (obj){switch(obj.type){case "select-one":if (obj.selectedIndex < 1 || obj.options[obj.selectedIndex].text == ""){alertMsg += " - " + fieldDescription[i] + "\n";}break;case "select-multiple":if (obj.selectedIndex < 1){alertMsg += " - " + fieldDescription[i] + "\n";}break;case "text":case "textarea":if (obj.value == "" || obj.value == null){if (obj.id == 'outro') {	if (document.getElementById('comoencontrou').selectedIndex == 3) { alertMsg += " - " + fieldDescription[i] + "\n"; }} else alertMsg += " - " + fieldDescription[i] + "\n";}break;default:}if (obj.type == undefined){var blnchecked = false;for (var j = 0; j < obj.length; j++){if (obj[j].checked){blnchecked = true;}}if (!blnchecked){alertMsg += " - " + fieldDescription[i] + "\n";}}}}if (alertMsg.length == l_Msg){return true;}else{alert(alertMsg);return false;}}// --></script></head><body><form action="formulario.php" method="post" name="form" onsubmit="return formCheck(this);"><label for="nome">Nome:</label><br /><input name="nome" type="text" id="nome" size="50" maxlength="100" /><br /><br /><label for="email">E-Mail:</label><br /><input type="text" name="email" id="email" size="50" maxlength="100"/><br /><br /><label for="comoencontrou">Como encontrou nosso site:</label><br /><select name="comoencontrou" id="comoencontrou" onchange="Habilitar()"><option value="" selected="selected">Selecione</option><option value="1">Google</option><option value="2">Yahoo</option><option value="3">Outro</option></select><br /><br /><div id="oculto" style="display:none;"><label for="outro">Outro:</label><br /><input type="text" name="outro" id="outro" size="50" maxlength="100" /><br /><br /></div><label for="ramo">Ramo de atividade:</label><br /><input type="text" name="ramo" id="ramo" size="50" maxlength="100" /><br /><br /><label for="cidade">Cidade:</label><br /><input type="text" name="cidade" id="cidade" size="50" maxlength="100" /><br /><br /><label for="estado">Estado:</label><br /><select name="estado" id="estado"><option value="" selected="selected">Selecione</option><option value="AC">AC</option><option value="AL">AL</option><option value="AM">AM</option><option value="BA">BA</option><option value="CE">CE</option><option value="DF">DF</option><option value="ES">ES</option><option value="GO">GO</option><option value="MA">MA</option><option value="MG">MG</option><option value="MS">MS</option><option value="MT">MT</option><option value="PA">PA</option><option value="PB">PB</option><option value="PE">PE</option><option value="PI">PI</option><option value="PR">PR</option><option value="RJ">RJ</option><option value="RN">RN</option><option value="RO">RO</option><option value="RR">RR</option><option value="RS">RS</option><option value="SC">SC</option><option value="SP">SP</option><option value="TO">TO</option></select><br /><br /><label for="opine">Opinião</label><br /><textarea name="opine" id="opine" cols="50" rows="10"></textarea><br /><br /><input type="submit" name="submit" id="submit" value="Enviar"></form><body></html>

[carol=) 0]

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

 

Brigadããããããããooooooooooooooooooooo

[Fleury 3]

hehehe quanto aplauso e jóia pra mim e pro Adriano!!!

Fico até emocionado :lol: hehehe

tchau tchau mocinha, bom trabalho http://forum.imasters.com.br/public/style_emoticons/default/kiss.gif

[Amun-RA 0]

Eu faria assim:

function Habilitar() {if (document.getElementById("comoencontrou").value=="3") {document.getElementById("Oculto").style.display="block";document.getElementById("outro").focus();} else {document.getElementById("Oculto").style.display="none";}}

Adaptação do form:

<form action="formulario.php" method="post" name="form" onSubmit="return Submeter();"><label for="comoencontrou">Como encontrou nosso site?</label><br /><select name="comoencontrou" id="comoencontrou" onChange="Habilitar();"><option value="" selected="selected">Selecione</option><option value="1">Google</option><option value="2">Yahoo</option><option value="3">Outro (Informe abaixo)</option></select><br /><br /><div id="Oculto" style="display:none;"><label for="outro">Outro:</label><br /><input type="text" name="outro" id="outro" size="50" maxlength="100" /><br /><br /><label for="cidade">Cidade:</label><br /><input type="text" name="cidade" id="cidade" size="25" maxlength="25" /><br /><br /><label for="uf">UF:</label><br /><select name="UF" id="UF" size="1"><option value=""></option><option value="SP">SP</option><option value="RJ">RJ</option></select></div><input type="submit" name="Submit" value="Enviar" id="Submit"></form>

:)

Adriano, como faria para que esse novo campo criado quando se clica em outro aparecesse exatamente do lado direito do select???

[Amun-RA 0]

Adriano, como faria para que esse novo campo criado quando se clica em outro aparecesse exatamente do lado direito do select???

Antes de tentar toda a questão de posicionamento com CSS, exclua os BR após o </select>:

</select><br /><br />

:)

Achei a solução. Basta trocar "block" na funcao habilitar por inline.Valeu.