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 
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
3 curtidas
Obrigado aos dois