Help with Jquery does not appear

Asked

Viewed 134 times

0

I have a problem on my site , I had the help of a member of the forum who gave me a code jquery , I put it to run on my site only I have a problem with it the warning that should be generated does not appear, someone can help me ? inserir a descrição da imagem aqui

#topo {
	background:url(../imagens/topo2etrelas2.png);
	border-left:1px solid #000;
	border-right:1px solid #000; 
	position:inherit;
	width:1024px;
	height:190px;
	margin:auto;
	

}


#fundoinicial {
	background: #FFF;
	width: 1024px;
	height: 500px;
	margin: auto;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	
}

#mapa {
	position:absolute;
	width: 660px;
	top:250px;
	left: 181px;
	
	
}

#lugares {
	position: absolute;
	width: 250px;
	height: 250px;
	top: 500px;
	left: 851px;
}

#cep label{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	height: 20px;
	top: 362px;
	left: 780px;
	
}

#cep button{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	margin: auto;
	height: 21px;
	width: 71px;
	top: 358px;
	left: 1028px;
	padding: 0px 3px;
	background: #60365E;
	border-bottom: none;
	color: #FFF;
	border-radius:10px;
		
		
		
	
}
#cep input{
	position: absolute;
	width: 112px;
	top: 359px;
	left: 911px;
	height: 15px;
	border-radius:10px;
}

#cep p1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	position: absolute;
	width: 109px;
	top: 388px;
	left: 854px;
}



#menufundo {
	background:#60365e;
	border:1px solid #000;
	position:relative;
	width:1024px;
	height:28px;
	margin:auto;
		
}


#ul li a{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style:normal;
	list-style-type:none;
	display: inline;
	font-size:19px;
	line-height:0px;
	padding:10px;
    margin:4px 0 0 52px;
	color:#FFF;
	text-decoration:none;
	float:left;
	
	
}

#ul li a:hover{
	text-shadow:0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black;	
	font-size:19px;
    color:black;
}


.rodape {
	background: url(../imagens/rodape.png);
	margin: auto;
	position:absolute;
	width: 1056px;
	height: 99px;
	left: 132px;
	top: 704px;

	
	
}
	


h1 a{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 175px;
	top: 716px;
	
}

p a{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 175px;
	top: 743px;
}

.facebook{
	width: 32px;
	right: 32px;
	position: absolute;
	top: 25px;
	left: 515px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	
}

.facebook:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.trabalhe {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 986px;
	top: 729px;
	width: 159px;

}

.email {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	margin-top: 20px;
	left: 987px;
	top: 732px;
}
<!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>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilocobertura.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"  src="jquery/jquery-migrate-3.0.0.min.js" ></script>
<style type="text/css">
body {
	background-image: url(imagens/projeto/imagens/fundo.jpg);
}
</style>
<script>
$(document).ready(function(){

	var ceps = ['88000-000', '99000-000'], //array com os ceps válidos
  	aviso = $('p');
  
  $('button').on('click', function(){ //função para quando clicar no botão
  		cepDigitado = $('#cep').val(); //pega o valor do cep digitado
      aviso.html(''); //limpa o aviso
      
  		if (ceps.indexOf(cepDigitado) > -1) { //verifica se o cep é válido
    		aviso.html('CEP Válido!');
    	} else {
    		aviso.html('CEP Inválido!');
    	}
  });

});


</script>
</head>


<body>


<div id="topo"></div><!--div final topo-->
<div id="menufundo">

<nav id="ul">	  	
       			<ul>            
        			<li><a href="index.html" title="Página Inicial">Página Inicial</a></li> 
        			<li><a href="quem_somos.html" title="Quem Somos">Quem Somos</a></li>
        			<li><a href="cobertura.html" title="Áreas de Cobertura">Áreas de Cobertura</a></li> 
        			<li><a href="servicos.html" title="Serviços">Serviços</a></li>
        			<li><a href="fale_conosco.html" title="Fale Conosco">Fale Conosco</a></li>
    			</ul>
</nav>
</div>

        	
<div id ="fundoinicial">

<div id="mapa">
<img  src="imagens/mapa.jpg"  />
</div>
<div id="lugares">
<img src="imagens/lugares.jpg" />

</div>
</div>
<div id="cep">
  <label>Consulte Seu CEP:</label>
  					<input type="text" id="cep" />
	<button>Pesquisar</button>
	<p></p>
</div>

</div>


<div class="rodape">
  
  
  <a href="https://www.facebook.com/Alfatec-Autorizada-Electrolux-1737242946511224/" title="Facebook" target="_blank">
  <img id= "facebook"  src="imagens/facebook-logo (2).png" alt="FaceBook" width="24" class="facebook" > 
  </a>
  
  
</div>








<h1><a href="maps" target="_blank" title="Abrir Mapa">Localização</a></h1>
<p><a href="maps" target="_blank" title="Abrir Mapa">R. Profᵃ José Azevedo Minhoto, 206<br />
Osasco - SP, 06080-125</a></p2>

<div class="trabalhe" > <h2>Trabalhe Conosco</h2></div>
<div class="email" > <p>[email protected]</p></div>


</body>
</html>

  • this cep validation works?

  • Yes It works !!!

1 answer

1


Use the jquery.min.js library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

OBS: the warning is being shown in all tags <p> of your document.

To avoid this instead of using aviso = $('p'); in your script use a class as an example aviso = $('.paviso');

and in HTML <p class="paviso"></p>

ANOTHER OBS: An ID selector of a given name can only be set to ONE and only ONE HTML element within the document.

In your document we have <div id="cep"> and <input type="text" id="cep" /> with the same id name. You cannot define more than one element with the same id on a page.

<div id="cep">
<label>Consulte Seu CEP:</label>
                <input type="text" id="cep" />

In fact you can even define, but according to my experiences everything related to this id will only have effect on the first element with this id name.

In your case the script that takes the value of the id element named cep will act on the div (which is before the input) and not on the input and consequently your script will not work as desired.

If div was after input, your script would work!!

  • I managed to solve that way Thank you so much for helping !!! Abs

Browser other questions tagged

You are not signed in. Login or sign up in order to post.