Jump to content
hauberthy

Edição de campo tipo telefone.

Recommended Posts

Preciso de ajuda com a opção "+" e "-" no campo telefone que estou criando, podem me ajudar?

 

 

Preciso criar um campo telefone na validação de cadastro em HTML e não estou conseguindo. 

Este campo tem que ter a opção de + e - para que o usuario possa acrescentar mais numeros ou remover na hora do cadaastro. 

O problema é que eu consegui fazer funcionar criando somente a parte do telefone, quando junto com os outros codigos e demais campos do cadastro ele para de funcionar

ficando sem ação nenhuma as opções + e - 

CODIGO COMPLETO DO MEU FORMULARIO

<!DOCTYPE html>
<html> 
<body>
<title>Ficha de Cadastramento</title>
<h3> Teste de validação de formulário</h3>
<script type="text/javascript">

function validarSenha(){
	senha = document.f1.senha.value;
   senha2 = document.f1.senha2.value;

   if(senha != senha2) {
        alert("Senhas diferentes!");
        return false; } } 

 function validarCPF(strCPF) {
var Soma, Resto, borda_original;
		Soma = 0;
		
		if (strCPF == "00000000000"){
			document.getElementById("cpf").setCustomValidity('CPF invalido!');
			return false;
		}
		
		for (i=1; i<=9; i++){
			Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (11 - i);
		}
		
		Resto = (Soma * 10) % 11;
		if ((Resto == 10) || (Resto == 11)){
			Resto = 0;
		}
		
		if (Resto != parseInt(strCPF.substring(9, 10))){
			document.getElementById("cpf").setCustomValidity('CPF invalido!');
			return false;
		}
		
		Soma = 0;
		for (i = 1; i <= 10; i++){
			Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (12 - i);
		}
		
		Resto = (Soma * 10) % 11;
		if ((Resto == 10) || (Resto == 11)){
			Resto = 0;
		}
		
		if (Resto != parseInt(strCPF.substring(10, 11))){
			document.getElementById("cpf").setCustomValidity('CPF invalido!');
			return false;
		}
		
		document.getElementById("cpf").setCustomValidity('');
		return true;
	}

function duplicarcampos(){
	var clone = document.getElementById('origem').cloneNode(true); 
	var destino = document.getElementById('destino');
	destino.appendChild (clone);
	
	var camposClonados = clone.getElementsByTagName('input');
	
	for(i=0; i<camposClonados.length;i++){
		camposClonados[i].value = '';
	}
}
function removerCampos(id){
	var node1 = document.getElementById('destino');
	node1.removeChild(node1.childNodes[0]);
}



</script>
<form action="" name="f1" onsubmit="return validarSenha()" onsubmit="return validarCPF()">
<p> Nome:
<input type="text" name="Nome:"> </p>
<p> Senha:
<input type="senha" name="senha" id="senha"> </p>
<p> Confirmar senha:
<input type="senha2" name="senha2" id="senha2"> </p>
<p> CPF:
<input id="cpf" name="cpf" required="required" pattern="[0-9]+$" maxlength="11" size="11" placeholder="000.000.00.00" onblur="validarCPF(this.value)"/> </p>
Endereço (rua e número):
<input type="text" name="Endereco" id="endereco" placeholder="ex.: Rua Abc, 100" >
<button type="button">Pesquisar CEP</button>
CEP <input type="text" name="cep" id="cep" />

<p> Renda Pessoal (Em reais):
<input type="text" name="renda" id="renda"> </p>
<p> Quantidade de CDs (R$1,50 cada):
<input type="number" name="quantidade" id="quantidade"> </p>
<p> Valor Total:
<input type="text" name="total" id="total" disabled=""> </p>
<p> Forma de Pagamento:
<select> id=Fpagamento
	<option>A vista</option>
	<option>Parcelado</option>
</select>
<p><div id="origem"> 
	Telefone:
        <input type="text" id="fone" name="fone[]"  maxlength="14" size="14"/>
		<input name="" value="+" type="button" style="cursor: pointer" onclick="duplicarCampos()">
		<input name="" value="-" type="button" style="cursor: pointer" onclick="removerCampos()"></p></div>
		<div id="destino">
	</div>
<p>
<input type="submit" name="Enviar" onclick="validarSenha()" onclick="validarCPF()">
</form></p>


</html>
</body>


COGIGO SEPARADO DO CAMPO TELEFONE
NÃO QUERO USAR O BOTAO COM IMAGEM, QUERO USAR COM O BOTAO PADRAO , COMO FAZ ?
<!DOCTYPE html>
<html>
<body>
<title>Ficha de Cadastramento</title>
<h3> Teste de validação de formulário</h3>
<script type="text/javascript">

function duplicarCampos(){
	var clone = document.getElementById('origem').cloneNode(true);
	var destino = document.getElementById('destino');
	destino.appendChild (clone);
	
	var camposClonados = clone.getElementsByTagName('input');
	
	for(i=0; i<camposClonados.length;i++){
		camposClonados[i].value = '';
	}
	
	
	
}

function removerCampos(id){
	var node1 = document.getElementById('destino');
	node1.removeChild(node1.childNodes[0]);
}
</script>





<div id="origem" align="center">
		Fone <input type="text" id="fone" name="fone[]"  maxlength="14" size="14"/>
		<img  src="mais.png" style="cursor: pointer;" onclick="duplicarCampos();" width="20" height="20">
		<img  src="menos.png" style="cursor: pointer;" onclick="removerCampos(this);" width="20" height="20"> 
	</div>
	
	<div id="destino">
	</div>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera já verifiquei vários páginas do google mas não encontrei o que precisava. Temos um sistema a qual no final temos a opção d imprimir os dados. que até aí está perfeito utilizo bootstrap para o layout e está ok. Porém preciso colocar a opção de pdf também aí não sai de jeito nenhum com o bootstrap. preciso gerar algo neste formato.
       

       
      Se alguem puder me dar um norte referente a isso agradeço demais.
    • By Rebeca Julia Bronzatti
      Boa tarde, bom ontem no meu projeto tudo estava funcionando normalmente, hoje assim que iniciei notei que os selects alguns buttons estavam divergindo do formato que eu gostaria, eu não faço ideia do porque isso, já que ele não apresenta erro e nada no código foi alterado pelo menos não nesses campos, já tentei fazer novamente mas a configuração continua, tentei alterar  pelo CSS mas infelizmente ele simplesmente ignora,  assim que iniciei hoje o projeto me deparei com esse erro Failed to load resource: the server responded with a status of 404 (Not Found) mas consegui resolver não sei se tem algo haver, se alguém puder me dar um help eu agradeceria muito nunca vi isso na vida. Eu to usando o materialize esse select já vem pronto.
      <div class="col s3"> <select name='tipo' class="browser-default"> <option value="" disabled selected>Tipo</option> <option value="Casa" class="tipo">Casa</option> <option value='Apartamento' class="tipo">Apartamento</option> <option>Sobrado</option> <option>Edicula</option> <option>KitNet</option> <option>Flat</option> <option>Sala Comercial</option> <option>Loja</option> <option>Galpão</option> <option>Terreno</option> <option>Fazenda</option> </select> </div>  

    • By dimoreira
      Boa noite programadores, estou a procura de um profissional que desenvolva um site simples, que tem apenas que me mostrar os resultados em tempo real da pagina de resultados da bet 365. Mas especificamente do futebol virtual. Vou mandar em anexo uma foto pra ter como base.   O modelo mais simples possivel é somente para acompanhar os resultados em tempo real sem ter q esta acessando o site da bet.


    • By Rafaeloliveiraz
      Olá pessoal,
       
      Eu estou tentando criar uma variavel para fazer um checker no conteúdo do input de um form antes de realizar o envio... Por exemplo SE o conteúdo do campo começar com "http://facebook.com/..." ele faz o envio normalmente, porém caso o começo seja OUTRO preciso que substituia o valor preenchido por um valor padrão e ai realize o envio.
       
      Acredito que com if e else resolva meu problema, eu até criei o bloqueio para que o conteúdo não seja enviado se for diferente mas por algum motivo ele só está funcionando se a pessoa tentar enviar uma segunda vez, como se o bloquei só funcionasse após a pessoa realizar o primeiro envio, então acabei desativando. O códito está somente assim agora:
       
       
      <form action="" id="shortForm" method="post"> <div> <input type="text" name="url" id="url" size="60" value="http://" onfocus="clearText(this)" class="input round-left" /> <button class="input button round-right" id="create">Encurtar URL</button> </div> </form>  
       
      Este form é para um encurtador de URL, onde eu quero que somente URLs do meu site sejam encurtadas, e caso alguém utilize uma URL para outro site preciso que o form altere o link dessa pessoa para outro padrão sem que ela saiba...
       
      Eu até montei a função mas não estou sabendo como posso mesclar com o input do form:
       
      <!DOCTYPE html> <html> <body> <p>Mudar conteúdo de envio</p> <input id="url" type="text"> <button onclick="myFunction()">Encurtar</button> <p id="envio"></p> <script> function myFunction() { var link = document.getElementById("url").value; var text; // Se a URL estiver certa if (link === "http://meusite.com/...") { input = "Enviado sem alterações"; // Se a url for outra } else { input = "http://urlcorreta.com"; } document.getElementById("envio").innerHTML = input; } </script> </body> </html>  
      Alguém poderia me dizer se isso poderia funcionar e como eu deveria seguir para mesclar ambos?
       
      Obrigado.
       
    • By Moacir Guilherme Filho
      Olá, possuo um formulário PHP para inserir em uma tabela no banco MySQL. Preciso criar uma função (PHP ou JAVA) semelhante ao "auto increment" para preencher um campo na minha tabela no banco que seja semelhante a isso, quando for inserindo: 0001/2020, 0002/2020, 0003/2020, porém ao virar o ano a numeração tem que zerar, ficando assim: 0001/2021, 0002/2021, 0003/2021. Formulário tem o nome "cad_ocorrencia.php", o banco "sisgcm", a tabela "atendimento" e o campo da tabela "numero_ocorrencia". No MySQL a tabela está assim: atendimento (id_atentidmento, numero_ocorrencia, datainicio e hora inicio). Obs: A função tem que funcionar como o auto increment porque o sistema será usado por mais de uma pessoa e se a função fizer a consulta no banco na hora que o formulário for aberto, poderá causar duplicidade de numero de ocorrência, então deve ser executada igualmente ao auto incremento.
      Desde já agradeço meus Mestres deste site.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.