Jump to content
danielpinho

Executar função apenas uma vez no "onkeyup"

Recommended Posts

Boa tarde pessoal,

 

Estou desenvolvendo um sistema de pagamento via cartão de crédito que requer a execução de um ajax (request https) quando o usuário digita o número do cartão, a fim de capturar a bandeira do mesmo. O javascript deve enviar via ajax somente os 6 primeiros dígitos do cartão.

 

A função já está funcionando parcialmente, da seguinte forma: quando o usuário digita o sexto dígito, o ajax faz a requisição e retorna o resultado.

 

O problema é que quando o usuário continua digitando o restante do número do cartão, o ajax continua fazendo uma requisição a cada tecla pressionada, o que vai acabar sobrecarregando desnecessariamente o meu servidor.

 

Eu sei que o ideal seria acionar a função somente quando a minha keyword tivesse lenght=6 (assim, ao continuar digitando a função não seria acionada), porém tem pessoas que copiam e colam o número do cartão de uma vez, e isso geraria um bypass na função...

 

Além disso, o sistema deve ser capaz de reconhecer que houve uma eventual mudança nos 6 números digitados inicialmente, para fazer uma nova requisição ajax com esses números novos.

 

A solução que pensei, em síntese, foi criar uma variável chamada "lastquery", inicialmente com o valor "000000". Digamos que os 6 dígitos pesquisados estivessem na variável "sixdigits". 

 

Quando a requisição ajax fosse feita, a variável "lastquery" teria valor alterado para o mesmo valor de "sixdigits".

 

E a requisição ajax ficaria condicionada da seguinte forma:   if (lasquery !== sixdigits) { executa ajax }.

 

O problema é que não está dando certo. Ele continua executando normalmente, mesmo quando o valor de lastquery é o mesmo valor de sixdigits.

 

Alguém mais inteligente do que eu consegue me ajudar? :smile:

 

Segue o código que não está funcionando perfeitamente. Reparem que fiz um alert para verificar o que estava dando errado, mas a mensagem que recebo no alert é sempre algo do tipo: "10100 is not equal to 10100". Não consigo entender porque isso acontece, já que lá em cima coloquei a condicionante !==.

 

Obrigado!

 

<form method="post">
 <input type="text" name="ccnumber" id="ccnumber" value="" onkeyup="getcardbin()">
</form>

<script>
var lastquery = "000000";

function getcardbin() {
	var min_length = 6;
	var keyword = $('#ccnumber').val();
	if (keyword.length >= min_length) {
		var justsix = keyword.substring(0, 6);
		if (justsix !== lastquery) {
			$.ajax({
				url: '/getcardbin.cgi',
				type: 'POST',
				data: {
				'tkn': 'token_interno',
				'tid': 'token_interno',
				'bin': justsix
				},
				success:function(data){
					$('#returnmsg').prepend(data);
					alert(justsix + ' is not equal to ' + lastquery);
					var lastquery = justsix;
				}
			});	
		}
	}
}
</script> 

 

Share this post


Link to post
Share on other sites

@danielpinho Fiz esse código, ele vai bloquear qualquer digito não alfa numérico e só vai fazer a requisição quando o sexto digito for inserido, ele também não faz a requisição caso o valor de seis dígitos for uma sequência de um único digito.

 

	var numCard;

            $(function(){
                numCard = $("#ccnumber");
                numCard.on("keypress", function(event)
                {
                    let 
                        valorTotal = $(this).val();
                        keyup = event.key;

                    keyup = keyup.replace(/(?![0-9])\w+/g, "");
                    valorTotal = (valorTotal+keyup);
                    
                    if (valorTotal.length == 6)
                    {
                        let sixNumber;
                        sixNumber = valorTotal.substring(0, 6);
                        if (sixNumber.replace(/(\d)\1{5}/g, "") != "")
                        {
                            $.ajax({
                                url: '/getcardbin.cgi',
                                type: 'POST',
                                data: {
                                'tkn': 'token_interno',
                                'tid': 'token_interno',
                                'bin': justsix
                                },
                                success: function (data){
                                    $('#returnmsg').prepend(data);
                                }
                            });
                        }
                    }

                    $(this).val(valorTotal);
                    event.preventDefault();
                });
            });

Infelizmente não vai dar para explicar o código, porem ele é fácil de entender.

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 HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
    • By mzaidan
      Pessoal, tenho o seguinte codigo:
      function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","getFaixa.php?q="+str,true); xmlhttp.send(); } } Na mesma página, logo embaixo:
      <select name='faixa' id='appearance-select' onchange="showUser(this.value)"> <option value='branca' <?=($faixa == 'branca')?'selected':''?>>Branca</option> <option value='azul' <?=($faixa == 'azul')?'selected':''?>>Azul</option> <option value='roxa' <?=($faixa == 'roxa')?'selected':''?>>Roxa</option> <option value='marrom' <?=($faixa == 'marrom')?'selected':''?>>Marrom</option> <option value='preta' <?=($faixa == 'preta')?'selected':''?>>Preta</option> </select><br> No getFaixa.php:
      include("conexao.php"); $q = intval($_GET['q']); $id = $_SESSION['id']; $update = "UPDATE usuario SET faixa='$q' WHERE usuario_id='$id'"; $result = mysqli_query($conexao, $update); O que eu gostaria era mudar o campo no BD, usando ajax.
      Ele até está mudando, só que está botando um 0 ao invés do value do select.
       
      Alguém poderia me ajudar?
      Onde estou errando?
      Grato.
    • By gust.php
      Fala pessoal.
       
      Quero fazer o seguinte: Tenho um campo select e um campo input. Quando eu selecionar um item do meu campo select, quero enviar o ID desse item, e o valor do campo input, que no caso é uma data, para um script PHP,  no PHP vou conferir uma situação e dizer se eu posso usar esse item ou não.
       
      Alguém pode me mostrar um exemplo?
       
      Obrigado.
×

Important Information

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