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

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.

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado.