Problems with Jquery to get input Text value

Question

I am unable to get the value of input text, from the error of indefinite... someone would know to answer me because it is like this???

$(document).ready(function () {
            $('#btnPesquisar').click(function () {

                var x = $("#txtMatriculaPesquisar");
                alert(x.val());
               

                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    url: 'Aluno.aspx/BuscaAluno',
                    data: "{'matircula':'" + matricula + "'}",
                    async: true,
                    dataType: "json",
                    success: function (result) {
                        if (result != null) {
                            $.each(result.d, function (key, value) {
                                $('#txtNome').value = value.Nome;
                                $('#txtMatricula').value = value.Matricula;
                                $('#txtCpf').value = value.Cpf;
                                $('#txtNascimento').value = value.Data;

                            }); 
                        
                        }
                        
               
                    },
               });
            });
        });

<div class="row">
            <div class="input-group col-md-6 col-md-offset-1">
              <input type="text" class="form-control" placeholder="Digite a Matricula" id="txtMatriculaPesquisar" value="" runat="server"/>
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btnPesquisar">Pesquisar</button>
              </span>
            </div>
        </div>

Answer 1

The problem is that you are storing the registration in the variable x and then passing the variable matricula for request. Since this variable does not exist, the javascript will use the value of Undefined

Another mistake is that when you capture an element with jQuery (in the callback onSuccess, for example), it returns an object to you. As in this object there is no property value, the code has just returned an undefined value or when you try to define a new value, it does not work.

When you want to capture or inform the value to an object of jQuery, utilize:

$('#txtNome').val(); // Para capturar
$('#txtNome').val("novo-valor"); // Para definir

$(document).ready(function () {
            $('#btnPesquisar').click(function () {

                let matricula = $("#txtMatriculaPesquisar");
                alert(matricula.val());
               

                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    url: 'Aluno.aspx/BuscaAluno',
                    data: "{'matircula':'" + matricula + "'}",
                    async: true,
                    dataType: "json",
                    success: function (result) {
                        if (result != null) {
                            $.each(result.d, function (key, value) {
                                $('#txtNome').val(value.Nome);
                                $('#txtMatricula').val(value.Matricula);
                                $('#txtCpf').val(value.Cpf);
                                $('#txtNascimento').val(value.Data);

                            }); 
                        
                        }
                        
               
                    },
               });
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
            <div class="input-group col-md-6 col-md-offset-1">
              <input type="text" class="form-control" placeholder="Digite a Matricula" id="txtMatriculaPesquisar" value="" runat="server"/>
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btnPesquisar">Pesquisar</button>
              </span>
            </div>
        </div>