Impedir o padrão no jQuery de envio de formulário


138

O que há de errado nisso?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

12
Funciona bem aqui . Você pode postar mais informações na sua pergunta? Se você alert()no manipulador de envio, ele é chamado? Caso contrário, pode haver um erro no seu script que impede que o manipulador de eventos seja conectado corretamente. Alguma coisa no console de erros?
Cidade

3
Esse link é interno e de nenhuma utilidade para nós.
Steve Robbins

Talvez uma versão mais antiga tenha sido armazenada em cache. Parece estar funcionando agora.
djreed


2
! Verifique se o código javascript é executado após o DOM estar pronto.
towry

Respostas:


175

Tente o seguinte:

$("#cpa-form").submit(function(e){
    return false;
});

12
Funciona, mas por que o método preferido de preventDefault funciona?
MikeJ

26
Veja esta pergunta para obter uma explicação melhor: stackoverflow.com/questions/1357118/…
Jordan Brown

8
Esta é a resposta errada. e.preventDefault()funciona bem com o envio de um formulário, o problema está em outro lugar no código do OP. O uso return false pode resultar em consequências não intencionais.
Chuck Le bumbum

58

Use a nova sintaxe de evento "on".

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

Citação: https://api.jquery.com/on/


2
Oi. Isso não funciona para mim. (sim, coloquei meu código dentro $(document).ready()) Como faço para funcionar?
Gui Imamura

1
@GuiImamura Precisa de mais informações. Você definiu a variável válida como trueou false? Você pode recriar seu código em jsfiddle.net e enviar o link? Tente adicionar um alert()para confirmar que a função está disparando. Algumas pessoas relataram que a adição e.stopPropagation();após e.preventDefault();interrompe o disparo de outros eventos em cadeia.
scarver2

Olá, estou usando $('#myFormID').validationEngine('validate')do jQuery validationEngine como variável valid, para verificar se a entrada é um endereço de email válido. No entanto, quero que ele evite o comportamento padrão de qualquer maneira; não preventDefaulttem que estar dentro do bloco if, não antes?
Gui Imamura

@GuiImamura Fico feliz em saber que você conseguiu. A preventDefaultestá dentro do caso não é válido bloco para parar o envio do formulário. Em outras palavras, se válido , use o comportamento padrão do formulário.
scarver2

13

Eu acredito que as respostas acima estão todas corretas, mas isso não indica por que o submitmétodo não funciona.

Bem, o submitmétodo não funcionará se o jQuery não puder obter o formelemento, e o jQuery não fornecerá nenhum erro sobre isso. Se o seu script for colocado no cabeçalho do documento, verifique se o código é executado depois que DOMestiver pronto . Então, $(document).ready(function () { // your code here // });vai resolver o problema.

A melhor prática é sempre colocar seu script na parte inferior do documento.


11

Essa é uma pergunta antiga, mas a resposta aceita aqui não chega à raiz do problema.

Você pode resolver isso de duas maneiras. Primeiro com o jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

Ou sem jQuery:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

Você não precisa usar return falsepara resolver esse problema.


Substituí o ouvinte de evento js nativo em vez do ouvinte de evento jquery e é trabalho. obrigado pela ideia.
Orhan Gazi

6
$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

Isso funciona perfeitamente para mim em uma página em que tenho um formulário do lado do cliente dentro de um formulário do servidor.
Liknes 26/01


2

Seu código está correto, basta colocá-lo dentro da função ready.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

Este conselho já é fornecido por outras respostas. Remova esta resposta para reduzir o inchaço da página. Você pode votar novamente nas outras respostas que representam o mesmo sentimento.
mickmackusa

2

DEPRECADO - esta parte está desatualizada, portanto, não a use.

Você também pode tentar esse código, se, por exemplo, tiver adicionado formulários dinâmicos posteriormente. Por exemplo, você carregou uma janela assíncrona com ajax e deseja enviar este formulário.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

UPDATE - você deve usar o método jQuery on () e tentar escutar o DOM do documento se desejar manipular conteúdo adicionado dinamicamente.

Caso 1, versão estática: se você tiver apenas alguns ouvintes e o seu formulário a ser manipulado for codificado, poderá ouvir diretamente no "nível do documento". Eu não usaria os ouvintes no nível do documento, mas tentaria ir mais fundo na árvore do doom, pois isso poderia levar a problemas de desempenho (depende do tamanho do seu site e do seu conteúdo)

$('form#formToHandle').on('submit'... 

OU

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

Caso 2, versão dinâmica: se você já ouve o documento no seu código, será útil para você. Isso também funcionará para o código que foi adicionado posteriormente via DOM ou dinâmico com o AJAX.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

OU

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

OU

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

7
.live()foi descontinuado desde o jQuery 1.7 e removido desde 1.9. Use em .on()vez disso.
Hank

0

Olá, procurei uma solução para fazer um formulário Ajax funcionar com o Google Tag Manager (GTM), o retorno falso impediu a conclusão e o envio da ativação do evento em tempo real na solução google analytics foi alterar o retorno falso por e.preventDefault () ; que funcionou corretamente segue o código:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

0

O e.preventDefault () funciona bem apenas se você não tiver problemas nos seus javascripts, verifique seus javascripts se o e.preventDefault () não funcionar, as chances de algumas outras partes do seu JS não funcionarem também


0

Bem, eu encontrei um problema semelhante. O problema para mim é que o arquivo JS é carregado antes da renderização do DOM. Então mova seu <script>para o final da <body>tag.

ou use adiar.

<script defer src="">

então tenha certeza de que e.preventDefault()deve funcionar.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.