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

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();
  });

Tente o seguinte:

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

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/

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.

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.

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

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

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

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

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           
    })
});

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();
   ...
});

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

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.