Adicionar options em um select com base em outro select (combobox)

Bruno_Ferreira · Novembro 19, 2008

Bom dia amigos!!!

Estou fazendo um formulário de cadastro de currículo em que é preciso cadastrar uma data de nascimento.

Para evitar datas inválidas, fiz três selects (combobox), um como o ano, outro com o mes e outro com o dia. Acontece que estou tentando preencher o select do dia com base no mes e ano selecionados no anterior, capturando meses com 31 dias, anos bissextos, etc.

Já tentei uma série de formas aqui e nada. Será que alguém poderia me ajudar e me dar uma sugestão?

Valeu!!!

Carutcho · Novembro 19, 2008

eu tenho uma sugestão.

Aqui no forum tem uma mascara de campo fodástica. contira esse código aqui (http://forum.imasters.com.br/index.php?showtopic=271292)

Porém você pode fazer uma adatação onde você pode comparar numeros e verificar se a data é válida.

function checkData (campo)
{
	var dia = parseInt(campo.value.substr(0,2));
	var mes = parseInt(campo.value.substr(3,2));
	var ano = parseInt(campo.value.substr(6,4));		
	if ((dia>0 && dia<=31)&&(mes>0 && mes<=12)&&(ano>0))
		alert('data válida');
	else
		alert('data invalida');	
}

Usando a função dele e a minha, seu HTML ficaria assim

<input name="cep" type="text" id="cep" maxlength="20" size="20" onBlur="java script:checkData(this)" onKeyPress="return digitos(event, this);" onKeyUp="Mascara('DATA',this,event);">

Utilize a função dele pra formatar a data e coloca esse ae q eu escrevi para validar a data :D, pode por no onblur do campo de data que vai funcionar :D, é só você adaptar pro que você precisa. Pode por exemplo, por pra quando a data for inválida limpar o conteúdo do campo e receber foco e por ae vai, depende de sua criatividade.

Abssss

Bruno_Ferreira · Novembro 19, 2008

Valeu Carutcho mas o que eu preciso é realmente carregar os dias válidos no select mesmo vou deixar o select em branco, e dependendo do ano e do mês, carregar os dias válidos, mas caso eu não ache outra sugestão, essa idéia é boa

O formulário é esse aqui

<form name="cadastrarCurriculo" method="post" action="cadastrar.php">
Nome: <input type="text" name="nome" maxlength=80><br/>
Telefone: <input type="text" name="telefone" maxlength=12><br/>
Celular: <input type="text" name="celular" maxlength=12><br/>
Email: <input type="text" name="email" maxlength=150><br/>
Nascimento: <select name="anoNascimento">
<?php
	for($i=(date("Y")-16); $i>(date("Y")-64); $i--)
		echo "<option value=$i>$i</option>";
?>
</select> / 
<select name="mesNascimento" onselect="java script:carregaDia();">";
<?php
	for($i=1; $i<13; $i++)
		echo "<option value=$i>$i</option>";
?>
</select> / 
<select name="diaNascimento">
</select><br/>
</form>

os pedaços em php são pra carregar os dias e os meses e eu chamo o javascript quando eu mudo o mês

Tentei isso aqui, no javascript e não deu certo, falta limpar o combobos primeiro mas é mais ou menos isso

function carregaDia()
{
	//captura os selects
	var ano = document.getElementById("anoNescimento");
	var mes = document.getElementById("mesNescimento");
	var dia = document.getElementById("diaNescimento");
	//captura o valor do ano
	var vlrano = document.cadastrarCurriculo.anoNascimento.options[ano.selectedIndex];
	
	var y;
	
	//if's para conferir os meses
	//ele utiliza o index do select para capturar o mes portanto, janeiro é o index 0 e dezembro o index 11
	if(mes.selectedIndex ==3 || valorMes == 5 || valorMes == 8 || valorMes == 10)
	{
		//for para preencher os options
		for(var i=1; i<31; i++)
		{
			y = document.createElement('option'); //cria um novo elemento option
			y.text=i; //seta o texto do elemento option
			y.value=i; //seta o valor do elemento option
			try
			{
				dia.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes
			}
				catch(ex)
			{
				dia.add(y); // adiciona um novo option no fim da lista para o IE
			}
		}
	//caso o mes seja fevereiro
	}else if(mes.selectedIndex == 1)
	{
		//caso o mes seja fevereirao ele veirfica o ano
		if(vlrano%4)
		{
			for(var i=1; i<29; i++)
			{
				y = document.createElement('option'); //cria um novo elemento option
				y.text=i; //seta o texto do elemento option
				y.value=i; //seta o valor do elemento option
				try
				{
					dia.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes
				}
					catch(ex)
				{
					dia.add(y); // adiciona um novo option no fim da lista para o IE
				}
			}
		}else
		{
			for(var i=1; i<29; i++)
			{
				y = document.createElement('option'); //cria um novo elemento option
				y.text=i; //seta o texto do elemento option
				y.value=i; //seta o valor do elemento option
				try
				{
					dia.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes
				}
					catch(ex)
				{
					dia.add(y); // adiciona um novo option no fim da lista para o IE
				}
			}
		}
	}else
	{
		for(var i=1; i<31; i++)
		{
			y = document.createElement('option'); //cria um novo elemento option
			y.text=i; //seta o texto do elemento option
			y.value=i; //seta o valor do elemento option
			try
			{
				dia.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes
			}
				catch(ex)
			{
				dia.add(y); // adiciona um novo option no fim da lista para o IE
			}
		}
	}*/
}

Isso não funcionou, alguém tem uma sugestão melhor que isso?

Valeu!!!

Bruno Caxito · Novembro 19, 2008

Você tambem pode validar o forumalario antes de enviar usando javascript.

EX:

if (mes == 2 && dia > 28) {
	  alert("Esta data não é valida");
	  false;
}

Carutcho · Novembro 19, 2008

Tchanannnnnnnn

acho q achei a solução.

Se liga, achei um algotírmo show aqui que verifica se o ano é bisexto.

function checkBisexto(ano)
{
	var bisexto = false;
	if (ano % 400 == 0)
	{  
		bisexto = true;			 
	}
	else 
	{   
		if(ano%4 == 0 && ano%100!=0)
		{   
			 bisexto = true;   
		}   
	}  
	return bisexto;
}

Entaum o bizu pra resolver é o seguinte, você tem q colocar a validação do seu campo no ano, coloca uma função no onChange dele executando essa função aqui, se ele retornar true, significa q o ano é bisexto. Portanto você verifica se o mês é fevereiro e o dia até 29 caso false verifica se o dia é até 28.

Agora pré carregar só daria se o cara preenchesse primeiro o ano e depois e por ultimo o dia.

Senão naum tem como.

Absss

Bruno_Ferreira · Novembro 21, 2008

Tchanannnnnnnn

acho q achei a solução.

Se liga, achei um algotírmo show aqui que verifica se o ano é bisexto.
function checkBisexto(ano)
{
	var bisexto = false;
	if (ano % 400 == 0)
	{  
		bisexto = true;			 
	}
	else 
	{   
		if(ano%4 == 0 && ano%100!=0)
		{   
			 bisexto = true;   
		}   
	}  
	return bisexto;
}
Entaum o bizu pra resolver é o seguinte, você tem q colocar a validação do seu campo no ano, coloca uma função no onChange dele executando essa função aqui, se ele retornar true, significa q o ano é bisexto. Portanto você verifica se o mês é fevereiro e o dia até 29 caso false verifica se o dia é até 28.

Agora pré carregar só daria se o cara preenchesse primeiro o ano e depois e por ultimo o dia.

Senão naum tem como.

Absss

Valeu Carutcho, ótima idéia, mas me explica uma coisa? porque do teste da divisão por 400? Só um teste da divisão por quatro já bastaria não?

a conferencia é tranquilo, o f*** é carregar as opções no segundo select. De início eu carregaria um array com os dias, aí eu adicionaria os options no select o caso é como fazer isso.

Bruno_Ferreira · Novembro 21, 2008

Tchanannnnnnnn

acho q achei a solução.

Se liga, achei um algotírmo show aqui que verifica se o ano é bisexto.
function checkBisexto(ano)
{
	var bisexto = false;
	if (ano % 400 == 0)
	{  
		bisexto = true;			 
	}
	else 
	{   
		if(ano%4 == 0 && ano%100!=0)
		{   
			 bisexto = true;   
		}   
	}  
	return bisexto;
}
Entaum o bizu pra resolver é o seguinte, você tem q colocar a validação do seu campo no ano, coloca uma função no onChange dele executando essa função aqui, se ele retornar true, significa q o ano é bisexto. Portanto você verifica se o mês é fevereiro e o dia até 29 caso false verifica se o dia é até 28.

Agora pré carregar só daria se o cara preenchesse primeiro o ano e depois e por ultimo o dia.

Senão naum tem como.

Absss

Valeu Carutcho, ótima idéia, mas me explica uma coisa? porque do teste da divisão por 400? Só um teste da divisão por quatro já bastaria não?

a conferencia é tranquilo, o f*** é carregar as opções no segundo select. De início eu carregaria um array com os dias, aí eu adicionaria os options no select o caso é como fazer isso.

Bruno_Ferreira · Novembro 21, 2008

Tchanannnnnnnn

acho q achei a solução.

Se liga, achei um algotírmo show aqui que verifica se o ano é bisexto.
function checkBisexto(ano)
{
	var bisexto = false;
	if (ano % 400 == 0)
	{  
		bisexto = true;			 
	}
	else 
	{   
		if(ano%4 == 0 && ano%100!=0)
		{   
			 bisexto = true;   
		}   
	}  
	return bisexto;
}
Entaum o bizu pra resolver é o seguinte, você tem q colocar a validação do seu campo no ano, coloca uma função no onChange dele executando essa função aqui, se ele retornar true, significa q o ano é bisexto. Portanto você verifica se o mês é fevereiro e o dia até 29 caso false verifica se o dia é até 28.

Agora pré carregar só daria se o cara preenchesse primeiro o ano e depois e por ultimo o dia.

Senão naum tem como.

Absss

Valeu Carutcho, ótima idéia, mas me explica uma coisa? porque do teste da divisão por 400? Só um teste da divisão por quatro já bastaria não?

a conferencia é tranquilo, o f*** é carregar as opções no segundo select. De início eu carregaria um array com os dias, aí eu adicionaria os options no select o caso é como fazer isso.

Carutcho · Novembro 21, 2008

Tipo,

O algoritmo achei aqui, num forum de java http://www.javafree.org/javabb/viewtopic.jbb?t=13682, só adaptei pra javascript, q na verdade naum tive mt trabalho e nesse tópico ae , o cara explica o pq dos calculos, na verdade eu achei a logica dos calculos no wikipedia, mas achei mais facil procurar o algoritmo pronto.

Um bizu, você pode ter um array com meses e quantidade de dias que cada um tem, e o unico mês q você naum confere é o de fevereiro que sofre alteração por causa do lance do bisexto.

Então seu ultimo combo é alimentado por um "for" que possui como variação a quantidade de dias que tem nesse array.

ex.:

//o combo de mês tem q ir de 0 a 11
var meses = [31,29,31]//colocar a qtd de dias dos meses ate dezembro, Ex.: janeiro tem 31 dias, fevereiro x, março x e por ae vai;

if (verificação de bisexto==true) 
   meses[1] = 29;  // mês 1 == fevereiro, pq o array começa do indice 0;
else
   meses[1] = 28;



loop = meses["resultado do campo de mês "];
for (i=0; i<loop;i++)
{
//   codigo q adiciona os dias
}

Essa aee é mais ou menos a logica.

Qualquer coisa posta aee

absss

Arquivado

Adicionar options em um select com base em outro select (combobox)

Recommended Posts

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Caxito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante