Why would a button click event cause site to reload in a Bootstrap form? Why would a button click event cause site to reload in a Bootstrap form? jquery jquery

Why would a button click event cause site to reload in a Bootstrap form?


A <button> tag uses Submit behavior by default. Thus your page submits the form when the button is clicked and this looks like a page refresh itself. To work around this you can either use an input tag

<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>

to do the same effect. Or you can cancel the Submit in your button's click Event Handler (if that's what you want) like this:

$(".btnSeccion").click(function(event) {    btnMostrarSeccion($(this));    event.preventDefault();})


The simplest solution is just adding a simple attribute of "type" to the button element, like so:

<button type="button" class="btn btn-default" onclick="...">My Button</button>

When indicating that the button element is specifically from the type=button, it will stop acting like a submit button and will not submit (thus, refresh) the current page.


I have face this issue many times.Whether using angular, bootstrap or any other js plugin sometime it works perfectly on desktop browser but fails to serve the purpose on mobile browsers or touch screen smartphones.

As button tags has a submit behavior by default.

Simplest solution is to use type="button"
This will solve the problem otherwise use js to stop submitting of the page.