Create action on an html button

Question

I’m new to Web development and I came across the following problem. I have an input text and an html button and I need to create an action that by clicking the button, a function is called and in the function, I will make the proper manipulations. Follow my code below.

<!-- FILTRO FLUTUANTE -->
    <div id="mws-themer">
        <div id="mws-themer-hide"></div>
        <div id="mws-themer-content">
            <form action="fornDetails.php">
                <div class="mws-themer-section">
                    <form action="" name="myForm" id="myForm" style="padding: 0; margin: 0;" method="POST">
                        <input type="submit" name="edtMFIR" id="edtMFIR" value="filtrar" class="mws-textinput error">
                    </form>
                </div>

                <div class="mws-themer-separator"></div>

                <div class="mws-themer-section">
                    <button class="mws-button red small" id="mws-themer-sendfilterPCD">Filtrar</button>           
                </div>
            </form>
        </div>
    </div>  

How to solve the problem?

In addition to HTML, there are php and javascript codes.

Answer 1

Very simple.

Sem Jquery:

    var btn= document.getElementById('id-do-botao');
        btn.addEventListener('click', function(e){
 // função aqui
});    

With Jquery:

$("#id-do-botao").on("click", function(e){
    // função aqui
});

I hope I’ve helped.

A simple example to help.

var btn = document.getElementById("btn");
btn.addEventListener('click', function(e){
  alert("botao clicado");
});

<button id="btn"> Clique aqui </button>