Publicado em 7 de out.

Erro por mais de 1 Javascript

#javascript

Olá, sou novo como programador e estou a construir um sistema basico.

porem quero ussa javascript em algumas coisa e estou com o seguinte problema.

estou usando 2 mask e um ajax para selecionar as cidades do estado selecionado, tudo por link.

porem uma esta meio que bloqueando a outra, ou seja se uso as 3 na pagina uma para de funcionar.

ja mudei a ordem, e a que não funcionava começa a funcionar e a outra para, ja testei uma por uma e todas funcionaram.

não entendo muito de java ainda, tive ajuda de um amigo para fazer. porem ele também não sabe o erro.

Queria saber se alguém pode me ajudar?

Códigos.

Pagina de cadastro

<!DOCTYPE hmtl>

<html lang="pt-br">
	<head>
 <meta charset="UTF-8"/>
 <link rel="stylesheet" type="text/css" href="css.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery-cpf.js"></script>
 <script type="text/javascript" src="js/jquery-ceptel"></script>
	</head>
	<body>
 <div id="menu">
 <ul>
 <li>
 <a href="index.php">Inicio</a>
 </li>
 <li>
 <a href="produtos.php">Produtos</a>
 </li>
 <li>
 <a href="login.php">Login</a>
 </li>
 <li>
 <a href="cadastro.php">Cadastro</a>
 </li>
 </ul>
 </div>
 <div id="conteudo">
 <form action="processarcad.php" method="post">
 <label>nome</label>
 <input name="nome" type="text" placeholder="Digite seu Nome" title="Somente letras" pattern="[a-z\s]+$" required><br />
 <label>login</label>
 <input name="login" type="text" maxlength="20" placeholder="Digite Um Login" required><br />
 <label>senha</label>
 <input name="senha" type="text" maxlength="20" placeholder="DIgite Uma Senha" required><br />
 <label>confirmar senha</label>
 <input name="confi_senha" type="text" maxlength="20" placeholder="Digite novamente sua Senha" required><br />
 <label>cpf</label>
 <input name="cpf" type="text" placeholder="___.___.___-__" onblur="validarCPF(this.value);" onkeypress="mascara(this, cpf_mask)" required><br />
 <label>email</label>
 <input name="email" type="email" placeholder="Digite um Email Valido" title="Somente E-mails São Validos" required><br />
 <label>tel</label>
 <input name="tel" type="tel" maxlength="12" placeholder="Digite o Numero do seu Telefone e seu DDD" onkeypress="mascara(this, '## ####-####')" required><br />
 <label>end</label>
 <input name="end" type="text" placeholder="Digite seu Endereço" required><br />
 <label>n imovel</label>
 <input name="n_imovel" type="text" placeholder="Digite o Nº do seu Imovel" maxlength="4" required><br />
 <label>cep</label>
 <input name="cep" type="text" placeholder="Digite seu Cep" onkeypress="mascara(this, '#####-###')" maxlength="9" required><br />
 <tr>
 <td>estado</td>
 <td>
 <select name="estados">
 <option>escolha um estado</option>

 <?php
 require("conectar.php");
 $resultado = mysqli_query($conexao, "SELECT id_estados, uf FROM estados ORDER BY uf;");
 if($resultado == false){
 echo("erro");
 }
 else{
 while ($row = mysqli_fetch_array($resultado)) {
 echo ("<option value='$row[id_estados]'>$row[uf]</option> <br>");
 }
 }
 ?>

 </select>
 </td>
 </tr><br />
 <tr>
 <td>cidade</td>
 <td>
 <select name="cidades">
 <option>escolha um estado</option>

 <script>

 $(document).ready(function(e) {
 $('[name="estados"]').on('change',function(){
 var Estados = $(this).val();
 $.get( "obtercidades.php", { estados:Estados }, function( data ) {
 $('[name="cidades"]').html(data);
 });
 });
 });

 </script>

 </select>
 </td>
 </tr>
 <input class="but" type="submit" value="enviar" />
 <input class="but" type="reset" value="Limpar" />
 </form>
 </div>
	</body>
</html>

jquery-cpf.js

/ CPF /

/apresenta box/

 function setText(){

 var x = document.getElementById('option1');
 var valor = x.options[x.selectedIndex].value;
 var texto = x.options[x.selectedIndex].text;

 div = document.getElementById('newInput');
 inseMat = document.getElementById('mat');
 insetNom = document.getElementById('nomeA');
 if(valor !== 'null')
 {
 div.style.display = '';
 inseMat.value=valor;
 insetNom.value=texto;
 }
 }
 /*fim apresenta box*/

 /*onblur="validarCPF(this.value);" chamada função no html*/
 /*valida cpf e cria mascara*/

 function validarCPF( cpf ){
 var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i;

 if(!filtro.test(cpf))
 {
 window.alert("CPF inválido. Tente novamente.");
 return false;
 }

 cpf = remove(cpf, ".");
 cpf = remove(cpf, "-");

 if(cpf.length != 11 || cpf == "00000000000" || cpf == "11111111111" ||
 cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" ||
 cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" ||
 cpf == "88888888888" || cpf == "99999999999")
 {
 window.alert("CPF inválido. Tente novamente.");
 return false;
 }

 soma = 0;
 for(i = 0; i < 9; i++)
 {
 soma += parseInt(cpf.charAt(i)) * (10 - i);
 }

 resto = 11 - (soma % 11);
 if(resto == 10 || resto == 11)
 {
 resto = 0;
 }
 if(resto != parseInt(cpf.charAt(9))){
 window.alert("CPF inválido. Tente novamente.");
 return false;
 }

 soma = 0;
 for(i = 0; i < 10; i ++)
 {
 soma += parseInt(cpf.charAt(i)) * (11 - i);
 }
 resto = 11 - (soma % 11);
 if(resto == 10 || resto == 11)
 {
 resto = 0;
 }

 if(resto != parseInt(cpf.charAt(10))){
 window.alert("CPF inválido. Tente novamente.");
 return false;
 }

 return true;
 }

 function remove(str, sub) {
 i = str.indexOf(sub);
 r = "";
 if (i == -1) return str;
 {
 r += str.substring(0,i) + remove(str.substring(i + sub.length), sub);
 }

 return r;
 }

 /** onkeypress="mascara(this, cpf_mask)" chama no html
 * MASCARA ( mascara(o,f) e execmascara() ) CRIADAS POR ELCIO LUIZ
 * elcio.com.br
 */

 function mascara(o,f){
 v_obj=o
 v_fun=f
 setTimeout("execmascara()",1)
 }

 function execmascara(){
 v_obj.value=v_fun(v_obj.value)
 }

 function cpf_mask(v){
 v=v.replace(/\D/g,"") //Remove tudo o que não é dígito
 v=v.replace(/(\d{3})(\d)/,"$1.$2") //Coloca ponto entre o terceiro e o quarto dígitos
 v=v.replace(/(\d{3})(\d)/,"$1.$2") //Coloca ponto entre o setimo e o oitava dígitos
 v=v.replace(/(\d{3})(\d)/,"$1-$2") //Coloca ponto entre o decimoprimeiro e o decimosegundo dígitos
 return v
 }
 //http://silas.theducks.com.br/arquivos/validacao_formatacao_js.html
 /*fim valida cpf e cria mascara*/

jquery-ceptel.js

/*
A função Mascara tera como valores no argumento os dados inseridos no input (ou no evento onkeypress)
onkeypress="mascara(this, '## ####-####')"
onkeypress = chama uma função quando uma tecla é pressionada, no exemplo acima, chama a função mascara e define os valores do argumento na função
O primeiro valor é o this, é o Apontador/Indicador da Mascara, o '## ####-####' é o modelo / formato da mascara
no exemplo acima o # indica os números, e o - (hifen) o caracter que será inserido entre os números, ou seja, no exemplo acima o telefone ficara assim: 11-4000-3562
para o celular de são paulo o modelo deverá ser assim: '## #####-####' [11 98563-1254]
para o RG '##.###.###.# [40.123.456.7]
para o CPF '###.###.###.##' [789.456.123.10]
Ou seja esta mascara tem como objetivo inserir o hifen ou espaço automáticamente quando o usuário inserir o número do celular, cpf, rg, etc

lembrando que o hifen ou qualquer outro caracter é contado tambem, como: 11-4561-6543 temos 10 números e 2 hifens, por isso o valor de maxlength será 12

 <input type="text" name="telefone" onkeypress="mascara(this, '## ####-####')" maxlength="12">
 neste código não é possivel inserir () ou [], apenas . (ponto), - (hifén) ou espaço
 */

 function mascara(t, mask){
 var i = t.value.length;
 var saida = mask.substring(1,0);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida){
 t.value += texto.substring(0,1);
 }
 }

Obitercidades.php

<?php
	require("conectar.php");
	$Estados = addslashes($_GET['estados']);
	$resultado = mysqli_query($conexao, "SELECT id_cidades, nome_cidades FROM cidades WHERE cidades_id_estados = '".$Estados."' ORDER BY nome_cidades;");
	if($resultado == false){
 echo("erro");
	}else{
 while ($row = mysqli_fetch_array($resultado)) {
 echo("<option value='$row[id_cidades]'>$row[nome_cidades]</option> <br>");

 }
}
?>

E o link do ajax para obter cidades

https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

Obrigado pela atenção. ^^

Discussão (0)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...