Запрет по умолчанию в форме Отправить jQuery

Что с этим не так?

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

Попробуй это:

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

Используйте новый синтаксис события «on».

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

Цитировать: https://api.jquery.com/on/

Я считаю, что приведенные выше ответы являются правильными, но это не указывает на то, почему submitметод не работает.

Ну, submitметод не будет работать, если jQuery не может получить formэлемент, и jQuery не выдает никакой ошибки по этому поводу. Если ваш скрипт находится в заголовке документа, убедитесь, что код запускается после того, DOMкак он готов . Итак, $(document).ready(function () { // your code here // });решим проблему.

Лучше всего всегда ставить сценарий внизу документа.

Это древний вопрос, но принятый здесь ответ не доходит до корня проблемы.

Вы можете решить это двумя способами. Сначала с помощью jQuery:

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

     e.preventDefault();

  });
}

Или без 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();

});

Вам не нужно использовать, return falseчтобы решить эту проблему.

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

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

Ваш код в порядке, вам просто нужно поместить его в готовую функцию.

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

УСТАРЕЛО - эта часть устарела, поэтому, пожалуйста, не используйте ее.

Вы также можете попробовать этот код, если вы, например, позже добавили динамические формы. Например, вы загрузили окно async с помощью ajax и хотите отправить эту форму.

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

ОБНОВЛЕНИЕ - вам следует использовать метод jQuery on (), чтобы попытаться прослушать DOM документа, если вы хотите обрабатывать динамически добавляемый контент.

Случай 1, статическая версия: если у вас есть только несколько слушателей, и ваша форма для обработки жестко запрограммирована, то вы можете слушать непосредственно на «уровне документа». Я бы не использовал слушателей на уровне документов, но я бы попытался углубиться в дерево дум, потому что это может привести к проблемам с производительностью (зависит от размера вашего сайта и вашего контента)

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

ИЛИ

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

Случай 2, динамическая версия: если вы уже слушаете документ в своем коде, этот способ будет вам полезен. Это также будет работать для кода, который был добавлен позже через DOM или динамически с AJAX.

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

ИЛИ

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

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

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

ИЛИ

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

Здравствуйте, мы искали решение для работы формы Ajax с Google Tag Manager (GTM), возвращение false препятствовало завершению и отправляло активацию события в режиме реального времени в Google Analytics. Решение должно было изменить возвращаемое значение false с помощью e.preventDefault (). ; который работал правильно, следует код:

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

e.preventDefault () работает нормально, только если у вас нет проблем с вашими javascripts, проверьте ваши javascripts, если e.preventDefault () не работает, есть вероятность, что некоторые другие части вашего JS также не работают

Ну, я столкнулся с подобной проблемой. Проблема для меня заключается в том, что файл JS загружается до того, как происходит рендеринг DOM. Так что переместите ваш <script>в конец <body>тега.

или использовать отсрочку.

<script defer src="">

так что будьте уверены, e.preventDefault()должно работать.