Como evitar que botões em um formulário façam o envio (prevent submit)

Post ensinando a como evitar que botões, elementos do tipo “button” em um formulário façam o envio (prevent default submit).

Prevent default submit – O problema

Utilizando o elemento em um formulário, sem definir o seu tipo “type” irá causar o envio do formulário quando clicado.

Repare que no exemplo acima estou utilizando “return false;” no evento onclick, mesmo assim o formulário ainda será enviado.

Você também poderá utilizar no “form” no evento “onsubmit” o valor “return false;”, porém essa não é a melhor saída já que isso irá bloquear o envio do formulário por qualquer outro botão do tipo “submit”.

Declarando tipo “button”

A solução é bem simples para este problema.

Ação qualquer

Defina o atributo “type” do tipo “button”, dessa forma o navegador entenderá que o botão não é do tipo “submit” que é considerado o padrão quando não declarado explicitamente no elemento o seu tipo.