[Resolvido] Como colocar um InnerHTML dependendo de 2 ou + Radios

Henrique Foletto · Janeiro 30, 2012

Olá, tudo bem? Este é meu primeiro tópico, então se coloquei no lugar errado, desculpem-me

Então, eu quero 2 ou mais grupos de Radio que dependendo do que for assinalado aparecer uma mensagem num Span por exemplo.

Tipo, tem 2 grupo, num é cor de cabelo e outro é sexo, no da cor tem 3 opções e no do sexo tem 2 ( é claro! ) se eu escolher amarelo das opções do primeiro grupo e homem do segundo, vai aparecer no span "Voce é Loiro" e se eu escolher Marron no 1° e Mulher no 2° aparece no span: "Voce é Morena"!

eu já tenho um funcionando, mas ele só depende de um grupo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function escolhecor(){
var text;
var rad=document.escolhacor.cor;
for(var i=0;i<rad.length;i++){
if(rad[i].checked){
	switch(rad[i].value){
	case 'cor1':text='Voce eh Moreno';break;
	case 'cor2':text='Voce eh Loiro';break;
	case 'cor3':text='Voce eh Grisalho';break;
	default: text='Voce falhou'
	}
}
}
document.getElementById('mydiv').firstChild.nodeValue=text;
}
</script>
</head>
<body>
<form name="escolhacor" action="">
	<fieldset>
 		<p><strong>Qual a cor de seu cabelo?</strong><br/>				 
 		<input name="cor" type="radio" value="cor1" checked>Marron<br/>
 		<input type="radio" name="cor" value="cor2">Amarelo<br/>
 		<input type="radio" name="cor" value="cor3">Branco<br/>	
 		</p>
		</fieldset>	
	<br>
</form>
<input type="button" value="Enviar" onclick="escolhecor()">
<br>
<div id="mydiv"> </div>
</body>
</html>

Queria fazer isso com mais de um.

Desde já, Grato. Att. Henrique Foletto.

Henrique Foletto · Janeiro 31, 2012

Acredito que seja algo assim:

<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function escolhecor(){
var text;
var rad=document.escolhacor.gen || cor;
for(var i=0;i<rad.length;i++){
if(rad[i].checked){
	switch(rad[i].value){
	case 'gen1' && 'cor1':text='Voce eh Moreno';break;
	case 'gen1' && 'cor2':text='Voce eh Loiro';break;
	case 'gen1' && 'cor3':text='Voce eh Grisalho';break;
	case 'gen2' && 'cor1':text='Voce eh Morena';break;
	case 'gen2' && 'cor2':text='Voce eh Loira';break;
	case 'gen2' && 'cor3':text='Voce eh Grisalha';break;
	default: text='Voce falhou'
	}
}
}
document.getElementById('mydiv').firstChild.nodeValue=text;
}
</script>
</head>

<body>
<form name="escolhacor" action="">
	<fieldset>
    		<p><strong>Qual a cor de seu cabelo?</strong><br/>			     
    		<input name="cor" type="radio" value="cor1" checked>Marron<br/>
    		<input type="radio" name="cor" value="cor2">Amarelo<br/>
    		<input type="radio" name="cor" value="cor3">Branco<br/>	
    		</p>
           <p><strong>voce é:</strong><br/>			     
    		<input name="gen" type="radio" value="gen1" checked>Homem<br/>
    		<input type="radio" name="gen" value="gen2">Mulher<br/>
    		</p>
		</fieldset>	
	<br>
</form>
<input type="button" value="Enviar" onclick="escolhecor()">
<br>
<div id="mydiv"> </div>
</body>
</html>

Só que dessa for não está indo, li uma vez que tem de ser usar "if's" porém não sei como ficaria, alguém consegue me dar essa força?

Obs.: Como que faz para o código fica em BBcode como o Ted fez lá em cima?

Dii · Janeiro 31, 2012

Pronto, resolvido o seu problema. B)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function escolhecor()
{
var text;
var rad = document.escolhacor.cor;
var gen = document.escolhacor.sexo;
for( var x = 0; x < gen.length; x++ )
{
   if( gen[x].checked )
   {
       for(var i=0;i<rad.length;i++)
       {
               if(rad[i].checked)
               {
                       if( gen[x].value == "m" )
                       {
                           switch(rad[i].value)
                           {
                               case 'cor1':text='Voce eh Moreno';break;
                               case 'cor2':text='Voce eh Loiro';break;
                               case 'cor3':text='Voce eh Grisalho';break;
                               default: text='Voce falhou'
                           }
                       }
                       else if( gen[x].value == "f" )
                       {
                           switch(rad[i].value)
                           {
                               case 'cor1':text='Voce eh Morena';break;
                               case 'cor2':text='Voce eh Loira';break;
                               case 'cor3':text='Voce eh Grisalha';break;
                               default: text='Voce falhou'
                           }
                       }
               }
       }
   }
}
document.getElementById('mydiv').firstChild.nodeValue=text;
}
</script>
</head>
<body>
<form name="escolhacor" action="">
               <fieldset>
                   <legend>Qual é o seu sexo?</legend>
                   <input type="radio" name="sexo" value="m" checked /> Masculino 
                   <input type="radio" name="sexo" value="f" /> Feminino
                       <p><strong>Qual a cor de seu cabelo?</strong><br/>                               
                       <input name="cor" type="radio" value="cor1" checked>Marron<br/>
                       <input type="radio" name="cor" value="cor2">Amarelo<br/>
                       <input type="radio" name="cor" value="cor3">Branco<br/> 
                       </p>
               </fieldset>     
               <br>
</form>
<input type="button" value="Enviar" onclick="escolhecor()">
<br>
<div id="mydiv"> </div>
</body>
</html>

Pra colocar bbcode, você deve utilizar a tag code e /code

Henrique Foletto · Janeiro 31, 2012

Hehe, amigo, muito obrigado, porém eu fiz de um outro modo, até parecido com o seu, mas agora que vi que voce postou gostaria de compartilha-lo com voce e as demais pessoas que visualizarem esse post. Eu simplismente dentro do switch cor1 coloquei um outro switch gen1 e gen2, que rolou bem de boa, repeti o processo com os demais:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function escolhecor(){
var text;
var rad=document.escolhacor.cor;
var rad2=document.escolhacor.gen;
for(var i=0;i<rad.length;i++){
if(rad[i].checked){
	switch(rad[i].value){
	case 'cor1':
	for(var i=0;i<rad2.length;i++){
		if(rad2[i].checked){
			switch(rad2[i].value){
			case 'gen1':text='Voce eh Moreno';break;
			case 'gen2':text='Voce eh Morena';break;
			default: text='Voce Precissa Completar todos os campos'
			}
		}
	}
	break;
	case 'cor2':
	for(var i=0;i<rad2.length;i++){
		if(rad2[i].checked){
			switch(rad2[i].value){
			case 'gen1':text='Voce eh Loiro';break;
			case 'gen2':text='Voce eh Loira';break;
			default: text='Voce Precissa Completar todos os campos'
			}
		}
	}
	break;
	case 'cor3':
	for(var i=0;i<rad2.length;i++){
		if(rad2[i].checked){
			switch(rad2[i].value){
			case 'gen1':text='Voce eh Grisalho';break;
			case 'gen2':text='Voce eh Grisalha';break;
			default: text='Voce Precissa Completar todos os campos'
			}
		}
	}
	break;
	default: text='Voce Precissa Completar todos os campos'
	}
}
}
document.getElementById('mydiv').firstChild.nodeValue=text;
}
</script>
<style>
.none {
	display: none;
}
</style>
</head>
<body>
<form name="escolhacor" action="">
	<fieldset>
    		<p><strong>Qual a cor de seu cabelo?</strong><br/>			     
    		<input name="cor" class="none" type="radio" value="cornone" checked>
           <input name="cor" type="radio" value="cor1">Marron<br/>
    		<input type="radio" name="cor" value="cor2">Amarelo<br/>
    		<input type="radio" name="cor" value="cor3">Branco<br/>
    		</p>
           <p><strong>Qual a cor de seu cabelo?</strong><br/>			     
    		<input name="gen" class="none" type="radio" value="gennone" checked>
           <input name="gen" type="radio" value="gen1">Homem<br/>
    		<input type="radio" name="gen" value="gen2">Mulher<br/>
    		</p>
		</fieldset>	
	<br>
</form>
<input type="button" value="Enviar" onclick="escolhecor()">
<br>
<div id="mydiv"> </div>
</body>
</html>

Coloquei um display none checked para aparecer a mensagem de quando alguém n selecionar algo aparecer uma mensagem pedindo para completar tudo, em vez de Undefined ( posso ter escrito errado ) E funcionou simplesmente como eu queria, Muito Obrigado pela atenção, isso foi de grande ajuda.

Espero também que minha solução ajude outras pessoas!

Grato, Att. Henrique Foletto.

Entrar

Arquivado

[Resolvido] Como colocar um InnerHTML dependendo de 2 ou + Radios

Recommended Posts

Henrique Foletto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Foletto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Foletto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante