Використання 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, оскільки нічого не передбачено у запобіганніDefault або поверненні помилкового, коли ви його опублікували, окрім того, що ваш вибір не зовсім помилився.

— Спаркі

1

return false;після .submit()відпрацьованого для мене! У мене був той самий випуск

— d -_- b

Якщо в обробнику виникає помилка JavaScript, e.preventDefault();код не досягається / виконується.

— Том

263

Виділяються дві речі:

Можливо, що назва вашої форми немає form. Швидше зверніться до тегу, скинувши #.

Також e.preventDefaultправильний синтаксис JQuery, наприклад

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

Варіант С також повинен працювати. Я не знайомий з варіантом 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 - це просто ім'я, яке ви даєте параметру, в цьому випадку це подія подання.

— 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

У моєму випадку повернення помилки було ключовим.

— elquimista

19

Щоб запобігти використанню типових / запобігти використанню форми

e.preventDefault();

Для припинення використання подій

e.stopPropagation();

Для запобігання надсилання форми "return false" також має працювати.

— Альфа
джерело

Дивіться цю відповідь, оскільки jQuery по-різному обробляє їх. stackoverflow.com/questions/1357118/…

— Sparky

1

Перевірте це, щоб зрозуміти подію кип'ятіння 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');

— barbieswmcrew

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!');
        }
    });

— Мохамед Нагіб
джерело