Ir para conteúdo

POWERED BY:

Arquivado

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

visitante_xp

[Resolvido] Abas e form unico

Por , em Javascript

Recommended Posts

visitante_xp    0

visitante_xp
Postado

Iae galera...^^

 

Estou fazendo um sistema para cadastros "simples", bom, nem tão simples assim. Pelo menos não pra mim...(E olha que sou eu que to programando hein...^^)

 

No meu sistema, existem 3 telas que compoem o cadastro: Dados gerais da empresa, Atividade e Socios.

 

Eu decidi que ao inves de ter tres telas passando informação de uma para a outra eu iria coloca-las em tres abas. As abas carregam perfeitamente o conteudo, mas fica uma exclamação no canto inferios esquerdo, o que significa que tem algum erro no código.

 

Prosseguindo... Usei um sistema de abas que achei no GOOGLE e que tem links, ligado nos link eu usei INCLUDE() do PHP. Os arquivos estão em .INC logo eu não consigo ver se há algum erro nos arquivos. (Antes não havia, mas agora parece que tem).

 

Tenho tambem no sistema uma verificador de campos em JavaScript, que diz se algum campo obrigatório esta vazio, mas ele só funciona na primeira aba.

 

O FORM eu coloquei entre os includes do PHP e as divs das abas...

 

Vou postar o script principal...

 

 

<!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 language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
	$("#content > label").hide();
	$("#content > label:eq(0)").show();
	$("#tabs > a:eq(0)").css("background", "#999999");
});
 
function opentab(num) {
	$("#content > label").hide();
	$("#content > label:eq(" + (num-1) + ")").fadeIn();
	$("#tabs > a").css("background", "#999999");
	$("#tabs > a:eq(" + (num-1) + ")").css("background", "#999999");	
}
</script>
<style type="text/css">
#tabnav {
	width: 80%;	
	margin: 0 auto;
}
 
#tabs {
	height: 20px;
	position: relative;
}
 
#content {
	position: relative;
	padding: 5px;
	border: 2px solid #78bee2;
}
 
#content label p {
	font-family: Trebuchet MS, Arial, Verdana;
	font-size: 12px;
}
 
#tabs a, #tabs a:visited {
	background:#999999;
	font-family: Trebuchet MS, Arial, Verdana;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	display: block;
	width: 70px;
	height: 17px;
	margin: 0 10px 0 0;
	text-align: center;
	padding: 3px 0 0 0; 
	float: left;
}
</style>
<script language="javascript">
function verifica(cadastro)
{
	if(cadastro.nome_empresa.value == "")
	{
		alert("Informe o nome da empresa.");
     cadastro.nome_empresa.focus();
		return false;
	}
		
	if(cadastro.cnpj.value == "")
	{
		alert("Informe número de CNPJ.");
     cadastro.cnpj.focus();
		return false;
	}
	
	
	if(cadastro.logradouro.value == "")
	{
		alert("Informe o logradouro.");
     cadastro.logradouro.focus();
		return false;
	}
	
	if(cadastro.n.value == "")
	{
		alert("Informe número.");
     cadastro.n.focus();
		return false;
	}
		
	if(cadastro.bairro.value == "")
	{
		alert("Informe o bairro.");
     cadastro.bairro.focus();
		return false;
	}
	
	if(cadastro.cidade.value == "")
	{
		alert("Informe a cidade.");
     cadastro.cidade.focus();
		return false;
	}
	
	if(cadastro.uf.value == "")
	{
		alert("Informe o estado.");
     cadastro.uf.focus();
		return false;
	}
	
	if(cadastro.telefone.value == "")
	{
		alert("Informe número de telefone.");
     cadastro.telefone.focus();
		return false;
	}
	
	if(cadastro.nome_empresa.value == "")
	{
		alert("Informe o nome da empresa.");
     cadastro.nome_empresa.focus();
		return false;
	}
	
	if(cadastro.cpf.value == "")
	{
		alert("Informe o CPF.");
     cadastro.cpf.focus();
		return false;
	}
	
	if(cadastro.cep.value == "")
	{
		alert("Informe número de CEP.");
     cadastro.cep.focus();
		return false;
	}
	
	if(cadastro.endereco.value == "")
	{
		alert("Informe o endereço.");
     cadastro.endereco.focus();
		return false;
	}
	
	if(cadastro.bairro_socio.value == "")
	{
		alert("Informe bairro.");
     cadastro.bairro_socio.focus();
		return false;
	}
	
	if(cadastro.cidade_socio.value == "")
	{
		alert("Informe a cidade.");
     cadastro.cidade_socio.focus();
		return false;
	}
	
	if(cadastro.uf_socio.value == "")
	{
		alert("Informe o endereço.");
     cadastro.uf_socio.focus();
		return false;
	}
	
	if(cadastro.capt_soc.value == "")
	{
		alert("Informe a participação no capital.");
     cadastro.capt_soc.focus();
		return false;
	}
	
	if(cadastro.cargo.value == "")
	{
		alert("Informe o cargo.");
     cadastro.cargo.focus();
		return false;
	}
	
	if(cadastro.tel_fix.value == "")
	{
		alert("Informe o Telefone do socio.");
     cadastro.tel_fix.focus();
		return false;
	}
	
	if(cadastro.cnae.value == "")
	{
		alert("Informe o CNAE principal.");
     cadastro.cnae.focus();
		return false;
	}

}

</script>
<?php
include("../conexoes/clientes.php");
conectar_clientes();
?>

</head>
<body>
<div id="tabnav" align="center">
<form action="sql.php" method="post" name="cadastro" onsubmit="return verifica(cadastro);">
<table width="100%" border="0" style="border:1px solid #000;">
  <tr>
    <td background="../imagens/bgtopo.PNG" align="center" style="color:#FFFFFF;"><h1>Cadastro de Clientes</h1></td>
  </tr>
  </table>
    	<div id="tabs">
        	<a href="#" onclick="opentab(1);">Cadastro</a>
        	<a href="#" onclick="opentab(2);">Atividade</a>
           	<a href="#" onclick="opentab(3);">Sócio</a> 
            <a href="../index.php" style="width:auto;">Voltar ao início</a>           
        </div>
    	<div id="content">
    		<label> <?php include("dados.inc"); ?> </label>
        	<label> <?php include("atividade.inc"); ?></label>
            <label> <?php include("socio.inc"); ?></label>
    	</div>
<input type="submit" name="ok" value="OK" />
</form>
</div>
</body>
</html>

Abraço!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

E qual é a dúvida?

 

qndo postar algo na área de CSS ou Javascript.. queremos o HTML gerado.

Exibir > Código Fonte

 

a parte server-side aqui, raramente interessa...

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado

Ta ai o link pra vcs olharem...

 

Sistema

 

Tenta dar OK em todas as telas...

 

Não era pra ir mas..vai... esse é o erro principal.

 

Tem erro no CSS das abas tmb...

 

Logo de cara da pra ver.

 

Ok, ok... Não me expressei direito... http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

O que eu quero, é que quando eu esteja na aba SOCIOS e clique em ok ele não só diga que faltam dados na aba DADOS como me leve até ela e de um FOCUS() no campo EMPRESA.

 

Eu tentei dar uma referencia mas como manjo muito pouco de JavaScript (quase nada) num consegui...Porque o que ele ta fazendo nesse caso é ir para a outra pagina.

 

Deu pra entender agora.... http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado

Você tem que trazer a div Dados para frente de novo...

Como você está escondendo ela? Com display? Com z-index? Então... é só fazer o mesmo de qeu quando clica no botão...

PS: mas vai ficar um código longo...

Porquê você teria que verificar input por input... tipo...

if(input1 == ''){
blablabla
}
if(input2 == ''){
blablabla
}
if(input3 == ''){
blablabla
}
if(input4 == ''){
blablabla
}

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