Impedir o redirecionamento do formulário OU atualizar ao enviar?

96

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.

Ian Storm Taylor
fonte

Respostas:

178

Basta lidar com o envio do formulário no evento de envio e retornar falso:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

Você não precisa mais do evento onclick no botão de envio:

<input class="submit" type="submit" value="Send" />
CMS
fonte
11
Funcionou como um encanto! E rápido como tudo! Eu amo esse site! Muito obrigado.
Ian Storm Taylor
3
Lembro-me do momento em que descobri que se podia retornar falso de um envio para não enviar também foi o momento em que comecei a gostar muito do sistema Javascript / DOM.
Imagist
Surpreendente. Onde posso encontrar documentos de especificação que explicam o que falseimpede o envio?
Davide
7
você realmente deve usar e.preventDefault () em vez de apenas retornar false ..
Juan
3
@RogerFilmyer errado. se você usar "return false;" você também está interrompendo a propagação, o que causará problemas de UX. Por exemplo, se você está esperando um "clique" borbulhar ou algo parecido.
Juan
19

Aqui:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

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.

karim79
fonte
$ ('# contactSend'). click (submitClick (e)); Diz-me que 'e' não está definido ..: /
David Da Silva Contín 09/08/12
3
Deve ser $('#contactSend').click(function(e) { submitClick(e) });ou$('#contactSend').click(submitClick);
Aaron
14

Na tag de abertura do seu formulário, defina um atributo de ação assim:

<form id="contactForm" action="#">
Brian Loughnane
fonte
2
1 para solução simples. Mas, infelizmente, a página ainda será atualizada na primeira vez que o usuário clicar em Enter. Uma má solução seria ligar o myForm.submit();mais rápido possível, mas então você está carregando a página duas vezes.
Ciclista Lingüista de
ele não será atualizado na primeira vez.
Nearoo
Esta resposta precisa ser rejeitada, porque NÃO resolve a questão original e torna a situação pior, alterando de fato o url após o recarregamento da página. Você precisa e.preventDefault()ou na return falsefunção onsubmit. stackoverflow.com/questions/19454310/…
Jeff
10

Parece que está faltando um return false.

Jesse Kochis
fonte
6

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):

<input name="o" required="required" aria-required="true" type="text">

Você deve usar o submitevento em vez do clickevento. Nesse caso, um pop-up será exibido automaticamente solicitando " Por favor, preencha este campo ". Mesmo com preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Como alguém mencionou anteriormente , return falseiria 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 um return falseno final.

Portanto, se você quiser se livrar desses pop-ups padrão , use o clickevento no botão de envio:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes
CPHPython
fonte
3

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.

Shishir Arora
fonte