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

138

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

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();
  });
djreed
источник
12
Здесь отлично работает . Можете ли вы разместить больше информации в вашем вопросе? Если alert()в обработчике отправки он вызывается? Если нет, то, возможно, в вашем скрипте есть ошибка, которая препятствует правильному подключению обработчика событий. Что-нибудь в консоли ошибок?
Город
3
Эта ссылка является внутренней и бесполезной для нас.
Стив Роббинс
Возможно, более старая версия была кэширована. Похоже, сейчас работает.
djreed
1
возможный дубликат event.preventDefault () против возврата false
Лиам
2
! Убедитесь, что код JavaScript запускается после того, как DOM готов.
до

Ответы:

175

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

$("#cpa-form").submit(function(e){
    return false;
});
Джордан Браун
источник
12
Это работает, но почему не работает предпочтительный метод предотвращать дефолт?
MikeJ
26
См. Этот вопрос для лучшего объяснения: stackoverflow.com/questions/1357118/…
Джордан Браун
8
Это неправильный ответ. e.preventDefault()отлично работает с отправкой формы, проблема лежит в другом месте кода ОП. Использование return false может привести к непредвиденным последствиям.
Чак Ле Батт
58

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

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

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

scarver2
источник
2
Здравствуй. Это не работает для меня. (да, я вставил свой код внутрь $(document).ready()) Как мне заставить его работать?
Гуй Имамура
1
@GuiImamura Нужна дополнительная информация. Вы установили допустимую переменную в trueили false? Можете ли вы восстановить свой код в jsfiddle.net и отправить ссылку? Попробуйте добавить, alert()чтобы подтвердить, что функция срабатывает. Некоторые люди сообщают, что добавление e.stopPropagation();после e.preventDefault();прекращает запуск других связанных событий.
scarver2
Здравствуйте, я использую $('#myFormID').validationEngine('validate')из jQuery validationEngine в качестве переменной valid, чтобы проверить, является ли ввод действительным адресом электронной почты. Тем не менее, я хочу предотвратить поведение по умолчанию в любом случае; это preventDefaultдолжно быть внутри , если блок, а не до него?
Ги Имамура
@GuiImamura Рад слышать, что вы получили его на работу. preventDefaultНаходится внутри , если не действительный блок , чтобы остановить подачу формы. Другими словами, если оно допустимо , используйте поведение формы по умолчанию.
scarver2
13

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

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

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

Towry
источник
11

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

Вы можете решить это двумя способами. Сначала с помощью 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чтобы решить эту проблему.

Чак Ле Батт
источник
Я заменил собственный слушатель событий js вместо слушателя событий jquery, и это работает. спасибо за идею
Орхан Гази
6
$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});
Крисалин Петровский
источник
Это прекрасно работает для меня на странице, где у меня есть форма на стороне клиента внутри формы на стороне сервера.
Ликнес
3
$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});
шраддха дхармер
источник
2

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

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}
Джай Катурия
источник
Этот совет уже предоставлен другими ответами. Пожалуйста, удалите этот ответ, чтобы уменьшить число страниц. Вы можете поднять другой ответ (ы), которые представляют такое же мнение.
mickmackusa
2

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

Вы также можете попробовать этот код, если вы, например, позже добавили динамические формы. Например, вы загрузили окно 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           
    })
});
NFlows
источник
7
.live()устарела с jQuery 1.7 и удалена с 1.9. Используйте .on()вместо этого.
Хэнк
0

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

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});
Navi
источник
0

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

ndoty
источник
0

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

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

<script defer src="">

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

Виньеш Война
источник