5

Gostaria que ao clicar em dois botões distintos os mesmos executassem a mesma função alterando apenas um valor.

No codigo abaixo consigo executar a função clicando no primeiro botão, porém quando clico no segundo não executa. Como posso proceder para realizar esta operação?

<script type="text/javascript">
$(document).ready(function(){

$('#btn_pag').on("click",function(){

var value = $(this).attr('value'); // Ao clicar no botao alterar apenas esse valor!

console.log(value);

//Dados referentes a entrega
var logradouro = $("input[name=logradouro]").val();
var bairro = $("input[name=bairro]").val();
var cidade = $("input[name=cidade]").val();
var uf = $("input[name=uf]").val();
var cep = $("input[name=cep]").val();
var numero = $("input[name=numero]").val();
var complemento = $("input[name=complemento]").val();

//Dados do comprador
var nomecli = $("input[name=nomecli]").val();
var emailcli = $("input[name=emailcli]").val();
var telcli = $("input[name=telcli]").val();
var celcli = $("input[name=celcli]").val();
var codcli = $("input[name=codcli]").val();

//Valida os campos referentes ao endereco!
if(logradouro == ''){alert('Preencha por favor o campo Logradouro.');$("input[name=logradouro]").focus();return false;}
if(bairro  == ''){alert('Preencha por favor o campo Bairro.');$("input[name=bairro]").focus();return false;}
if(cidade  == ''){alert('Preencha por favor o campo Cidade.');$("input[name=cidade]").focus();return false;}
if(uf  == ''){alert('Preencha por favor o campo UF.');$("input[name=uf]").focus();return false;}
if(cep  == ''){alert('Preencha por favor o campo CEP.');$("input[name=cep]").focus();return false;}
if(numero  == ''){alert('Preencha por favor o campo Número.');$("input[name=numero]").focus();return false;}


//Valida os campos telefone/celular do cadastro do cliente
if(telcli  == '' || telcli.length < 8){alert('Preencha por favor o campo TEL. \n O campo deve conter no mínimo 8 caracteres. Ex. DD+99999999');$("input[name=telcli]").focus();return false;}
if(celcli  == '' || telcli.length < 8){alert('Preencha por favor o campo CEL. \n O campo deve conter no mínimo 8 caracteres. Ex. DD+99999999');$("input[name=celcli]").focus();return false;}

   var urlData = 'logradouro=' +logradouro+ '&bairro=' +bairro+ '&cidade=' +cidade+ 
'&uf=' +uf+ '&cep=' +cep+ '&numero=' +numero+ '&complemento=' +complemento+ '&nomecli=' +nomecli+
'&emailcli=' +emailcli+ '&telcli=' +telcli+ '&celcli=' +celcli+ '&codcli=' +codcli;

//console.log(urlData);

$.ajax({

type : 'post',
url : 'url',
data : urlData,
datatype : 'html',
sucess : function(data){
$('body p').html(txt);
}

});

});// btn_pagar click

});

</script>
1) Botao:

<a href="#" class="button small red" id="btn_pag" value="card">Pagar com Cartão</a>

2) Botao:
<a href="#" class="button small red" id="btn_pag" value="boleto">Gerar Boleto</a>
1
  • 2
    Penso que o problema está ao definires duas <a href> com o mesmo id Commented 30/04/2014 às 15:17

2 Respostas 2

4

Você está tentando usar o ID como se fosse uma classe, para selecionar vários elementos.

Quando o jQuery encontra o seletor de ID (i.e. #id), ele usa um método especializado do browser (getElementById), que retorna apenas o primeiro elemento com o ID especificado... por isso funciona para o primeiro botão e não para o segundo.

Você poderia, ao invés de definir o ID de ambos os elementos, definir uma classe chamada btn_pag para ambos, e então selecioná-los usando o seletor de classe (i.e. .classe):

HTML:

<a href="#" class="button small red btn_pag" value="card">Pagar com Cartão</a>
<a href="#" class="button small red btn_pag" value="boleto">Gerar Boleto</a>

Javascript:

$(document).ready(function(){
    $('.btn_pag').on("click", function() {

        var value = $(this).attr('value'); // Ao clicar no botao alterar apenas esse valor!

        alert(value);

        // .... restante do código
    });

});

jsfiddle de exemplo

4

O id dos botões não podem ser repetidos apenas as classes. O id é um identificador único.

O que você pode fazer é alterar o id do botão 2 para btn_pag2 e no seu seletor jquery fazer isso

$('#btn_pag,#btn_pag2')..on("click",function(){

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .