Two buttons to perform the same function?

Navigation
5

I would like to click on two different buttons to perform the same function by changing only one value.

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

<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>
    
asked by anonymous 30.04.2014 / 17:08

2 answers

4

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

When jQuery finds the ID selector (ie #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 one.

You could, instead of defining the ID of both elements, define a class named 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
    });

});

example jsfiddle

    
30.04.2014 / 17:34
4

The id of the buttons can not be repeated only the classes. The id is a unique identifier.

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

$('#btn_pag,#btn_pag2')..on("click",function(){
    
30.04.2014 / 17:19
Decoder for CAPTCHA How to do data mining in a txt file with re.finditer