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

Как предотвратить отправку формы с помощью 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>

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

Ответы

Ответ 1

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

Возможно, имя вашей формы не 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

Вероятно, у вас есть несколько форм на странице, и использование $ ('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;
});

Ответ 3

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

e.preventDefault();

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

e.stopPropagation();

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

Ответ 4

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

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

Это работает.

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

Ответ 5

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

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

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

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

Ответ 6

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

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

и в JQuery script:

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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