Two buttons to perform the same function?

Question

I would like that when clicking on two separate buttons they perform the same function by changing only one value.

In the code below I can execute the function by clicking on the first button, but when I click on the second one it does not execute. How can I proceed to carry out this operation?

<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>

Answer 1

Button id cannot be repeated only classes. Id is a unique identifier.

What you can do is change the id of the 2 button to btn_pag2 and your jquery selector to do this

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

Answer 2

You are trying to use the ID as a class, to select multiple elements.

When jQuery finds the ID selector (i.e. #id), it uses a specialized browser method (getElementById), which returns only the first element with the specified ID... so it works for the first button and not for the second.

You could, instead of defining the ID of both elements, define a class called btn_pag for both, and then select them using the class selector (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 of example