Запобігання замовчуванню у формі Надіслати 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;
});

Використовуйте новий синтаксис події "увімкнено".

$(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 (GTM), помилка повернення завадила завершити і подати активацію події в режимі реального часу в рішенні аналітики google було змінити помилку повернення на 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()має працювати.