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

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

145 голосов
/ 19 февраля 2012

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

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

Ответы [ 11 ]

214 голосов
/ 19 февраля 2012

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

  • Возможно, имя вашей формы не 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>
25 голосов
/ 15 февраля 2014

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

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

e.preventDefault();

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

e.stopPropagation();

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

5 голосов
/ 23 августа 2013

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

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

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

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

3 голосов
/ 31 августа 2016

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

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

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

$('#form').attr('onsubmit','return true;');
2 голосов
/ 04 сентября 2018

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

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
1 голос
/ 05 октября 2018

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

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 голос
/ 12 июля 2017

Когда я использую тег <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 голос
/ 19 февраля 2012

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

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

0 голосов
/ 18 ноября 2017 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...