Cancel bootstrap JS default procedure

Question

Cancel bootstrap JS default procedure

Navigation

#1 by (0 votes)

0

Good morning,

I'm learning to program web now (I studied C # last year in college and this year is web, so I wanted to get ahead), I'm programming in ASP.NET, I made all my "form" in bootstrap, visually stayed as I wanted, all right, I created the event that clicked 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 programming anything for them, talking to a colleague of mine he said that This is because of js, which by default sends the form, if you have more than one button they will all send, and I need to replace this default! I just do not understand much of js, is that what he said? And how would I do it? Here is the video that shows what happens.

javascript html asp.net css bootstrap

asked by anonymous 06.02.2018 / 15:14

1 answer

Take photo of a system using xampp and javascript cors Error when hosting site, which does not appreciate when testo in localhost

score 0 · Accepted Answer

By default, the form buttons will perform the "submit" action, that is, take the data that is in the form and perform a "post".

Here's 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>