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 <button> em um formulário, sem definir o seu tipo “type” irá causar o envio do formulário quando clicado.
<form method="post" action=""> <p>Teste</p> <button onclick="funcao_qualquer(); return false;">Ação qualquer</button> </form>
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.
<button type="button" onclick="funcao_qualquer(); return false;">Ação qualquer</button>
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.