Использование JQuery - предотвращение отправки формы

178

Как предотвратить отправку формы с использованием jquery?

Я попробовал все - посмотрите 3 различных варианта, которые я попробовал ниже, но все это не будет работать:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

Что может быть не так?

Обновление - вот мой HTML:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Здесь что-то не так?

jquery forms

— Люси Уэтерфорд
источник

Покажите свой HTML, потому что нет ничего плохого в protectDefault или верните false, когда вы его опубликовали, кроме того, что ваш селектор был полностью неверен.

— Спарки

1

return false;после того, как .submit()работал для меня! У меня была та же проблема

— d -_- b

Если в обработчике возникает ошибка JavaScript, e.preventDefault();код не достигается / не выполняется.

— Том

264

Выделяются две вещи:

Возможно, что имя вашей формы нет form. Скорее обратитесь к тегу, опустив #.

Также e.preventDefaultправильный синтаксис JQuery, например

    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

Вариант C также должен работать. Я не знаком с вариантом B

Полный пример:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— Филип Фурье
источник

2

Что-то еще не так. Я использую эту технику ежедневно. Лучше всего предположить, что на странице есть ошибки JavaScript, возможно, проверьте это с помощью FireBug?

— Филипп Фурье

@ LucyWeatherford, я обновил свой ответ с примером, который работает. Может быть, вы заметили что-то.

— Филипп Фурье

В вашем обновлении HTML я заметил, что у вас есть атрибут класса для вашей формы. Измените селектор JQuery с $('#form')на $('.form')для атрибутов класса.

— Филипп Фурье

1

Спасибо! Я закончил тем, что использовал ваш код на той же странице, и он работал, все еще не зная, что случилось, хотя, но теперь все хорошо. Спасибо!

— Люси Уэтерфорд

1

@ ÂngeloRigo e - это просто имя, которое вы даете параметру, в данном случае это событие submit.

— squall3d

34

Вероятно, у вас есть несколько форм на странице, и использование $ ('form'). Submit () добавляет это событие к первому появлению формы на вашей странице. Вместо этого используйте селектор класса или попробуйте это:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

или лучшая версия этого:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— Артем Киселев
источник

1

В моем случае возвращение false было ключом.

— Elquimista

19

Для предотвращения использования по умолчанию / предотвращения отправки формы

e.preventDefault();

Чтобы остановить всплытие событий, используйте

e.stopPropagation();

Чтобы предотвратить отправку формы, также должно работать «return false».

— Альфа
источник

Смотрите этот ответ, потому что jQuery обрабатывает их по-разному. stackoverflow.com/questions/1357118/…

— Sparky

1

Проверьте это , чтобы понять события bubling quirksmode.org/js/events_order.html

— альфа

2

JQuery на API состояний: «Возвращение ЛЖИ из обработчика события будет автоматически вызывать event.stopPropagation()и event.preventDefault()A. falseЗначение может быть передано для обработчика как сокращенная запись function(){ return false; }.»

— Пол

7

У меня тоже была такая же проблема. Я также попробовал то, что вы пытались. Затем я изменяю свой метод не на использование jquery, а на использование атрибута «onsubmit» в теге формы.

<form onsubmit="thefunction(); return false;">

Оно работает.

Но когда я пытался поместить ложное возвращаемое значение только в "thefunction ()", это не мешает процессу отправки, поэтому я должен поставить "return false;" в атрибуте onsubmit. Итак, я заключаю, что мое приложение формы не может получить возвращаемое значение из функции Javascript. Я понятия не имею об этом.

— Луки Б. Субэкти
источник

1

Это разница между false;и return false;. Вам нужно будетonsubmit="return thefunction();"

— xr280xr

4

У меня была такая же проблема, и я решил это (не элегантно, но работает):

$('#form').attr('onsubmit','return false;');

И это имеет преимущество, на мой взгляд, в том, что вы можете изменить ситуацию в любое время:

$('#form').attr('onsubmit','return true;');

— vinxxe
источник

Может быть, было бы немного удобнее просто удалить атрибут при возврате формы предотвращения отправки$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

Присоедините событие к элементу отправки, а не к элементу формы. Например, в вашем HTML сделать так

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— М Вайс
источник

2

Вы можете просто проверить, является ли форма действительной, если да, запустите отправку логики, в противном случае выведите ошибку.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— Кодовый шпион
источник

1

Когда я использую <form>тег без атрибута id="form"и вызываю его по имени тега непосредственно в jquery, он работает со мной.
Ваш код в HTML-файл:

<form action="page2.php" method="post">

и в сценарии Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— Ноха Салах
источник

1

$('#form')ищет элемент с id="form".

$('form') ищет элемент формы

— Рахул
источник

0

Вы забыли идентификатор формы, и это работает

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— Шинтадонику Алисса
источник

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

отсюда: https://api.jquery.com/submit-selector/ (интересная страница о типах отправки)

— Крис Стронг
источник

0

Это также, кажется, работает и может быть немного проще:

$('#Form').on('submit',function(){
    return false;
})

— Ukuser32
источник

0

Используя jQuery, вы можете сделать следующее:

1- Используйте исходное событие отправки формы с кнопкой «Отправить», при этом предотвращая запуск события, затем

2- Проверьте правильность формы. Это может быть реализовано следующим образом:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— Мохамед Нагиб
источник