Cancel bootstrap JS default procedure

Question

Good morning,

I’m learning to program web now( studied C# last year in college and this year is web, so I wanted to get ahead ), I will program in Asp.net, I did all my "form" in bootstrap, visually stayed as I wanted, all right, I created the event click on the button to program it, but everything I do it sends the form and erases the data, any of the buttons that click, even without I program anything for them, talking to a colleague of mine he said this is on account of js , that by default sends the form, if there is more than one button all will send, and I need to replace this default ! just that I don’t know much about you, is that what he said? and how would I do? Follow the video showing what happens.

Answer 1

By default, the form buttons will perform the action of "Submit", ie, take the data that are in the form and perform a "post".

Here is an example of how to prevent this default behavior using Jquery.

$('#form-post #btn-post').click(function(e){
    e.preventDefault();
    alert('Previnido comportamento padrão!')

});

<form id="form-post" action="/pagina-processa-dados-do-form" method="post">
    <div>
        <label for="name">Nome:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensagem:</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="button">
        <button id="btn-post" type="submit">Enviar sua mensagem</button>
    </div>
</form>
<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>