Problem validating input

Question

I have a code where the user inserts the student ID and so it is redirected to a page with only the student presences, but if the user does not enter any data in the input it displays all presences, what can I be doing to fix? BS: I’ve tried several ways but none worked, I think the logic is a little crooked, but I’m new and trying to go slowly and see what I can, I wanted to know what to do to make it work properly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
    <div class="card-body">
            
            <h3>Coloque a matricula de seu filho </h3>
            <input type="text" name="nome" class="form-control" id="campoInput" placeholder="Digite o número da matricula"> 
            <button type="submit"  id="btnInput" class="btn btn-success mt-2" >Pesquisar</button>

    </div>
</div>


<script>

    $("#btnInput").on("click",function(e){
    var urlFixa = "localhost:8081/exibir/";
    var valorInput = $("#campoInput").val();
    var urlFinal = urlFixa + valorInput + "";
    $("#campoInput").attr("src",urlFinal);
    $("#srcImg").html(urlFinal);
    
    window.location.href = 'exibir/'+valorInput;
})

</script>

Edit 1:

Filter code that made with Node.js and sequelize:

  app.get('/exibir/:id', function (req, res) {
    Aluno.findAll({ order: [['idAluno', 'DESC']]}).then(function (alunos) {
        const alunosdb = alunos
        Post.findAll({
          where:{ conteudo: {[Op.substring]: req.params.id }},
          order: [['id', 'DESC']]}).then(function (posts) {
            res.render('frequencia', { posts: posts, alunos: alunosdb })
        })
    })
})

Answer 1

So friend, you want to be redirected to a page with the presence of users, first: where you will store the information of the presence of each student?

You need a backend to process the information of this input and return you the corresponding page, there are N ways to do this, I recommend you use PHP because it is widely used by the internet and relatively easy to understand.

There are several solutions, you can create a php page where the information would be sent by an AJAX request, processed and returned via the same request, if you want to do the whole process without leaving the same page.

You can create the same page but pass the data through the GET/POST already embedded in html/php.

In this example I created a file called view.php and put in it:

if (!empty($_GET["nome"])) { //Checa se a variavel GET tem o index nome
    echo "Você esta na pagina do aluno ".strval($_GET["nome"]);
}

In JS, to keep what you did I only changed a few things:

    $("#btnInput").on("click",function(e){
        var urlFixa = "localhost:8081/exibir/";
        var valorInput = $("#campoInput").val();
        var urlFinal = urlFixa + valorInput + "";
        $("#campoInput").attr("src",urlFinal);
        $("#srcImg").html(urlFinal);
        
        window.location.href = 'exibir.php?nome='+valorInput;
    })

To understand what’s going on you should learn about the differences between GET and POST methods Difference between POST and GET, but in short, in the GET method (which I used) the information is passed through the URL, all after the "?" in the url are information passed to the site by GET. In your code:

$("#btnInput").on("click",function(e){
    var urlFixa = "localhost:8081/exibir/";
    var valorInput = $("#campoInput").val();
    var urlFinal = urlFixa + valorInput + "";
    $("#campoInput").attr("src",urlFinal);
    $("#srcImg").html(urlFinal);
    
    window.location.href = 'exibir/'+valorInput;
})

You are trying to access a file from the display folder that has the same input value. Example:".../display/Joao" probably the "display" directory does not have a file called "Joao".

If the intention is to store information from students in folders, this idea would be a waste of time because you would create a page for each student manually.

I tried to explain as best I could, I hope it helped, if you have doubts about anything I’ll be here.