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 CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By Aureo Almeida
      Não tenho domínio do uso de Ajax e estou com problema para chamar uma função PHP de um arquivo. Num arquivo chamado atualiza.php possuo uma função para atualizar tabelas de um Banco de Dados com dois insert into, chamada function atualizaPdIt().
      Eu desejo que esta função seja chamada para dentro de um arquivo chamado finaliza_compra.php através do evento onclick de um imput button, que está assim:
      <button onclick=" atualizaCompra ()" class='imput-concluir'>Finalizar</button> O Script que coloquei no Head da página é este:
      <script> function atualizaCompra () { $.ajax({ url:'atualiza.php', complete: function (atualizaPdIt) { alert(atualizaPdIt.responseText); }, error: function () { alert('Erro'); } }); return false; } </script> Porém, a função não é executada. O que está errado? Para constar, o script de atualização do arquivo atualiza.php funciona perfeitamente bem quanto deixado dentro de um bloco de código da página finalizar_compra.php, portanto, não é nele que está o problema, mas na forma como estou chamando.
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By kriskastro
      Oi, pessoal. Preciso de uma ajuda de vocês. 
      Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?
       
      A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.
      <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>  
    • 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?
×

Important Information

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