Pesquisei um monte de páginas, mas não consigo encontrar meu problema, então tive que fazer um post.
Tenho um formulário que tem um botão de envio e, quando enviado, quero que NÃO seja atualizado NEM redirecionado. Eu só quero que o jQuery execute uma função.
Aqui está o formulário:
<form id="contactForm">
<fieldset>
<label for="Name">Name</label>
<input id="contactName" type="text" />
</fieldset>
<fieldset>
<label for="Email">Email</label>
<input id="contactEmail" type="text" />
</fieldset>
<fieldset class="noHeight">
<textarea id="contactMessage" cols="20"></textarea>
<input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
</fieldset>
</form>
<small id="messageSent">Your message has been sent.</small>
E aqui está o jQuery:
function sendContactForm(){
$("#messageSent").slideDown("slow");
setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}
Eu tentei com e sem um elemento de ação no formulário, mas não sei o que estou fazendo de errado. O que me incomoda mais é que tenho um exemplo que faz isso perfeitamente: Página de exemplo
Se você quiser ver meu problema ao vivo, vá para stormink.net (meu site) e verifique a barra lateral onde está escrito "Envie-me um e-mail" e "Assinatura RSS". Ambos são formulários nos quais estou tentando fazer isso funcionar.
fonte
false
impede o envio?Aqui:
Em vez de usar o evento onClick, você usará vincular um manipulador de eventos 'click' usando jQuery para o botão de envio (ou qualquer botão), que tomará submitClick como um retorno de chamada. Passamos o evento ao callback para chamar preventDefault , que é o que vai impedir que o clique envie o formulário.
fonte
$('#contactSend').click(function(e) { submitClick(e) });
ou$('#contactSend').click(submitClick);
Na tag de abertura do seu formulário, defina um atributo de ação assim:
fonte
myForm.submit();
mais rápido possível, mas então você está carregando a página duas vezes.e.preventDefault()
ou nareturn false
função onsubmit. stackoverflow.com/questions/19454310/…Parece que está faltando um
return false
.fonte
Se você quiser ver os erros do navegador padrão sendo exibidos , por exemplo, aqueles acionados por atributos HTML (que aparecem antes de qualquer tratamento JS de código de cliente):
Você deve usar o
submit
evento em vez doclick
evento. Nesse caso, um pop-up será exibido automaticamente solicitando " Por favor, preencha este campo ". Mesmo compreventDefault
:Como alguém mencionou anteriormente ,
return false
iria parar a propagação (ou seja, se houver mais manipuladores anexados ao envio do formulário, eles não serão executados), mas, neste caso, a ação acionada pelo navegador sempre será executada primeiro. Mesmo com umreturn false
no final.Portanto, se você quiser se livrar desses pop-ups padrão , use o
click
evento no botão de envio:fonte
Uma solução alternativa seria não usar a tag de formulário e manipular o evento de clique no botão de envio por meio do jquery. Dessa forma, não haverá nenhuma atualização de página, mas ao mesmo tempo há uma desvantagem que o botão "entrar" para envio não funcionará e também em celulares você não receberá um botão ir (um estilo em alguns celulares). Portanto, use a tag de formulário e use a resposta aceita.
fonte