Problem recovering 2 values with javascript and jquery

Question

I have the problem to recover 2 values and send by load. I can recover the data from the data attribute link but the input I can’t recover to concatenate with the data and do the right thing. Follows the code.

Javascript:

$('.buscarr').click(function() {
    var id = $(this).attr('campo1');
    var id2 = $(this).attr('data');
    alert(id);
    console.log(id);
    console.log(id2);
    $("#cliente1").load($(this).attr(id2 + id));
});

HTML:

<div class="form-group">
    <label for="busca">Nome Servico*:</label> <input id="campo1" type="text" class="form-control" placeholder="Insira um nome para busca">
</div>
<a href="#" data="/wbahd/servico_servlet?acao=buscar&busca=" class="btn btn-default btn-cadastrar-btn buscarr">Buscar</a>

</div>

Answer 1

It returns nothing because attr searches for an attribute of the element, and buscarr does not have it. - Lucas Costa

Use var id = var id = $('#campo1').val(); or var id = $('form-control').val();

$(document).ready(function(){
$('.buscarr').click(function() {
    var id = $('#campo1').val();
    //var id = $('form-control').val();
    var id2 = $(this).attr('data');
    //alert(id);
    console.log(id);
    console.log(id2);
    //$("#cliente1").load($(this).attr(id2 + id));
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="form-group">
    <label for="busca">Nome Servico*:</label> <input id="campo1" type="text" class="form-control" placeholder="Insira um nome para busca">
</div>
<a href="#" data="/wbahd/servico_servlet?acao=buscar&busca=" class="btn btn-default btn-cadastrar-btn buscarr">Buscar</a>

</div>

You can also use var id = document.getElementById('campo1').value;

$(document).ready(function(){
$('.buscarr').click(function() {
    var id = document.getElementById('campo1').value;
    var id2 = $(this).attr('data');
    //alert(id);
    console.log(id);
    console.log(id2);
    //$("#cliente1").load($(this).attr(id2 + id));
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="form-group">
    <label for="busca">Nome Servico*:</label> <input id="campo1" type="text" class="form-control" placeholder="Insira um nome para busca">
</div>
<a href="#" data="/wbahd/servico_servlet?acao=buscar&busca=" class="btn btn-default btn-cadastrar-btn buscarr">Buscar</a>

</div>