Como faço para botão submit não dar refresh?

Como faço para quando eu clicar no botão submit do meu formulário não dar refresh na minha página e mandar os dados para o php da mesma página com javascript puro?

Ao invés de usar isto:

<input type="submit">

<!-- ou -->
<button>Submit</button>

Use isto:

<button type="button">Submit</button>

O atributo type="button" é o que faz a mágica acontecer.

1 curtida

Um <input type="button"> também funciona.

A diferença é que um input só permite texto simples (que você coloca no atributo value), por exemplo, <input type="submit" value="OK"> vai mostrar um botão com o texto “OK”. O máximo que dá para fazer é estilizar este texto com CSS.

Já um button permite HTML dentro dele (ou seja, não se restringe a texto, podendo ter imagens, etc).

1 curtida

Eu tentei fazer isso porém quando eu faço as informações do form não vai até o php

Nesse caso vc vai ter que usar AJAX para mandar os dados.

Aqui tem um ótimo tutorial, bons estudos :slight_smile:


Se bem que nos browsers atuais (exceto no finado Internet Explorer) seria mais recomendado usar a Fetch API. Mas ainda recomendo a leitura do link anterior sobre AJAX, para fixar bem os conceitos (já que a ideia geral é basicamente a mesma).

3 curtidas

Mas isto é o esperado. Agora vc vai ter que implementar manualmente o comportamento desejado ao apertar o botão.

A página que o Hugo mostrou tem um exemplo completinho, segue que é sucesso.

Depois de segui-la, dá uma olhada na API Fetch, pois é o jeito mais moderno de se fazer requisições: Usando Fetch - APIs da Web | MDN

2 curtidas

Obrigado aos dois