Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Mais uma vez preciso de ajuda.
Preciso modificar um código na qual a bandeira do cartão seja selecionada automaticamente ao digitar o início da numeração do cartão por convenção internacional. Ou seja, os 6 primeiros dígitos do número do cartão de crédito identificam a bandeira do cartão.
Todo cartão começado por 4 é Visa; cartões Mastercard começam com 51, 52, 53, 54 ou 55; e cartões American Express começam com 34 e 37. Preciso fazer uma função que seja ativada a cada tecla digitada no campo do número do cartão (DICA: evento onKeyUp) e ainda, Se o primeiro dígito teclado for 4 então a bandeira Visa é selecionada (Fig. 11 esquerda). Se o primeiro dígito teclado não for 3, 4 ou 5, então uma mensagem de erro é emitida e o campo do número do cartão é apagado.
Alguém sabe me dizer que função é essa? Já rodei o google todo e não consegui achar algum esqueleto dessa função.
Eu tenho abaixo, o código do box do cartão de crédito.
<fieldset class="fsResDir"> <legend>Forma de Pagamento</legend> <br/>
<label>
<input type="radio" name="RadForma" checked /> Cartão
</label>
<label><input type="radio" name="RadForma" /> Cheque
</label>
<label><input type="radio" name="RadForma" /> Dinheiro
</label> <br/> <br/> <br/>
<fieldset id="dadoscartao"> <legend>Dados do Cartão</legend> <br/>
<label>
<input type="radio" name="RadBand" checked />
<img src="imagens/visa.png" />
</label>
<label>
<input type="radio" name="RadBand"/>
<img src="imagens/master.png" />
</label>
<label>
<input type="radio" name="RadBand" />
<img src="imagens/amex.png" />
</label> <br/> <br/>
<label for="validade" class="labcol1">Validade:</label>
<input type="text" class="val22" name="cartaomes" /> /
<input type="text" class="val44" name="cartaoano" />
<br/> <br/>
<label for="numero" class="labcol1">Número: </label>
<input type="text" class="val120esq" name="numerocartao" />
</fieldset>
</fieldset>No link a seguir, segue exemplo quando digitamos um número correto do cartão e aí, a bandeira é automaticamente selecionada: https://flic.kr/p/zhX6fT
No link a seguir, segue exemplo quando digitamos um número incorreto do cartão e aí, é apresentado a mensagem de erro e os dados do cartão apagados: https://flic.kr/p/Acy6M5
Desde já, quem puder me auxiliar, muito obrigado!
Ricardo,
Obrigado.
Vou verificar sua dica e posto aqui o feedback.
Valeu!
Olá!
No campo digitavel você pode deixar um onbluir="nome_function();" e mandar pelo ajax, com isso ele pega o valor via post e consulta rapidamente no banco de dados e retorna o que você quiser.
function nome_function(){
$.ajax({
url:'arquivo.php',
type:'POST',
data: $('#id_form').serialize(),
succes: function(data){
$('#id_input').html(data); --> aqui fiz pra trazer um resultado dentro de um input de exemplo;
}
});
}Obrigado, também, Cesar.
Mas analisei o exercício e ele pede em Javascript, mesmo.
Não posso usar esses outros recursos. Ou seja, é pra complicar mesmo (risos).
Continuo no 0 x 0 :(
Falta apenas essa questão para eu concluir tudo...
Galera,
Consegui o código.
Agradeço à todos o apoio. Fiz um trabalho em conjunto e um parceiro de classe conseguiu apoiar.
<script>
function SelecionaCartao(NumeroCartao) {
var NumeroCartao = document.getElementById("numerocartao").value;
Opcoes = document.forms["compras"].elements["Bandeira"];
var regexVisa = /^4/;
var regexMaster = /^5[1-5]{1}/;
var regexAmex = /^3[47]{1}/;
var invalidos = /^[0126789]|^5[06-9]{1}|^3[1235689]/;
if(regexVisa.test(NumeroCartao)) {
Opcoes[0].checked = true;
return false;
}
if(regexMaster.test(NumeroCartao)) {
Opcoes[1].checked = true;
return false;
}
if(regexAmex.test(NumeroCartao)) {
Opcoes[2].checked = true;
return false;
}
if(invalidos.test(NumeroCartao)){
alert('cartao inválido');
document.getElementById("numerocartao").value = "";
Opcoes[0].checked = true;
return false;
}
}
</script>queria saber como q vc chamou a função em html
obrigadaa
Ola amigo, tudo bem, espero que sim.
Voce pode utilizar Jquery para fazer isso.
Tipo, pegar o Conteudo digitado no campo e testar o length.
faca o controle aqui }
}