JavaScript-код, щоб зупинити подання форми

206

Один із способів зупинити подання форми - повернути помилку з функції JavaScript.

Після натискання кнопки подання викликається функція перевірки. У мене є випадок перевірки форми. Якщо ця умова виконується, я викликаю функцію з назвою returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

Я використовую JavaScript та Dojo Toolkit .

Замість того, щоб повернутися до попередньої сторінки, він подає форму. Як я можу скасувати це подання та повернутися на попередню сторінку?

javascript html forms

— Мухаммед Імран Тарік
джерело

RU Звичайно, ця функція викликає ?? спробувати поставити попередження ('тест'); перед window.history

— samirprogrammer

так, я впевнений; її називають.

— Мухаммед Імран Тарік

8

можливий дублікат Як не допустити подання форми?

— TJ

292

Ви можете використовувати повернене значення функції, щоб запобігти надсиланню форми

<form name="myForm" onsubmit="return validateMyForm();">

і функціонувати як

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

У випадку Chrome 27.0.1453.116 м, якщо вищезгаданий код не працює, встановіть поле returnValue параметру обробника події на хибне, щоб змусити його працювати.

Дякую Сем за обмін інформацією.

Редагувати:

Дякуємо Vikram за його вирішення для, якщо validateMyForm () повертає false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

де validateMyForm () - це функція, яка повертає false, якщо перевірка не вдалася. Ключовим моментом є використання події імені. Ми не можемо використовувати для egepreventDefault ()

— Геманта Металія
джерело

1

Лише здогадка: для мене це не працює в останній версії Chrome.

— Сем

5

Все, що повертається false, здається, не має ніякого ефекту; Chrome все ще надсилає форму. Наприклад, onsubmit="return false;". Однак встановлення returnValueполя параметра обробника події falseдля мене працює.

— Сем

3

Привіт Сем / Hemant, чи можете ви надати зразок коду щодо того, як встановити поле returnValue параметра обробника події на помилкове, будь ласка.

— JackDev

2

Я думаю, оскільки це прийнята відповідь, вона, мабуть, повинна сказати, як це зробити правильно. Я разом з JackDev цікавлюсь, як змусити це правильно працювати. Оскільки це не працює

— Cruncher

1

Якщо validateMyForm()є помилки return false, не буде досягнуто. Тож це може не вдатися. Через багато годин я знайшов рішення, яке працює, і розмістив його нижче.

— Вікрам Пуді

116

Використовуйте запобігання за замовчуванням

Інструментарій Dojo

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Ванільний JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

— Грег Гуйда
джерело

3

Я б порекомендував event.preventDefault () над поверненням помилкових з багатьох причин. Це має бути головна відповідь: blog.nmsdvid.com/…

— acidjazz

1

Хороша відповідь. Краще, ніж обраний.

— Ані Менон

2

Добре, але де ви б виконали перевірку, яку хоче ОП?

— Саханд

1

@acidjazz Але як можна отримати доступ до даних форми після запобігання дефолту?

— CodeAt30

@Sahand @ codeat30 Ви можете отримати доступ до події target.

— Адріан

50

На даний момент працює наступне (тестується в Chrome і Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

Де validateMyForm () - це функція, яка повертається, falseякщо перевірка не працює. Ключовим моментом є використання імені event. Ми не можемо використовувати, наприклад , для e.preventDefault().

— Вікрам Пуді
джерело

15

Просто використовуйте просту, buttonа не кнопку подання. І зателефонуйте на функцію JavaScript для обробки форми подання:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Функція в scriptтезі:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Ви також можете спробувати window.history.forward(-1);

— дку.райкумар
джерело

Мені подобається такий підхід, оскільки він дозволяє використовувати мої випадки використання, зворотні дзвінки.

— Едді

12

Це запобігає використанню клавіші введення для подання форми. Також нові атрибути HTML5, такі як requiredне працюватимуть.

— Сем

8

Безліч важких способів зробити просту справу:

<form name="foo" onsubmit="return false">

— Даніял
джерело

3

Ця точна відповідь (Гаразд, не точна, оскільки у вашому не вистачає напівкрапки) була надіслана на 8 місяців раніше, і вона має негативні голоси з вагомих причин. Це працює більшу частину часу. Але не у всіх браузерах весь час.

— Auspex

3

Я не сказав, що вам потрібна крапка з комою; Я зазначив, що це було все, що відрізнялося між вашою відповіддю та набагато старшою. Той факт, що ви зараз просите мене вказати, які браузери не підтримують це (я ніколи не говорив, що такі були, я просто зазначив, що це не завжди працює), свідчить про те, що ви досі не читали всю цю сторінку .

— Auspex

2

Я, як правило, не досліджую голоси, що не мають право голосу, за винятком випадків, коли я не знав, що люди мають правильний код. Технічно крапка з комою стороння, тому це неправильно. І ви сказали, що "вашому не вистачає крапки з комою", маючи на увазі, що це потрібно, а це неправильно. Ви кажете, що "не завжди працюватиме", але ви не можете вказати на окремий регістр чи браузер, де він не працюватиме? Це обгрунтована логіка? Це правильний код. Тож якщо ви не зможете вказати на випадок, коли це не спрацює, тоді у вас немає точки.

— Даніял

Як це не має більшої кількості результатів? Це набагато більш лаконічно порівняно з іншими прикладами.

— Sal Alturaigi

Можливо, тому, що назва не відповідає тому, що хлопець насправді просив.

— Даніял

6

Усі ваші відповіді дали щось з чим працювати.

Нарешті, це спрацювало для мене: (якщо ви не вибрали хоча б один пункт прапорця, він попереджає і залишається на одній сторінці)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

— Гдба
джерело

Працював і для мене.

— четан

4

Базуючись на відповіді @Vikram Pudi, ми також можемо зробити це так, як за допомогою чистого Javascript

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

— Фан Ван Лін
джерело

3

Я рекомендую не використовувати onsubmitта замість цього прикріплювати подію до сценарію.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Потім використовуйте preventDefault()(або returnValue = falseдля старих браузерів).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— Ісаак Абрамовіч
джерело

Чи можете ви пояснити, чому ви не використовуєте onsubmit?

— theFreedomBanana

Можливо, це просто вподобання, але мені легше зрозуміти функціональність веб-сторінки, якщо всі слухачі подій додаються JSзамість HTMLатрибутів. Таким чином, вам не потрібно сильно стрибати туди-сюди під час читання чужого коду

— Ісаак Абрамовіч

що робити, якщо хтось натискає клавішу на одному з входів, а не натискаючи кнопку? взагалі ii все ще подає ...

— bluejayke

1

Скажімо, у вас є форма, схожа на цю

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Ось javascript для функції підтвердження дії

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Цей працює на Firefox, Chrome, Internet Explorer (край), Safari тощо.

Якщо це не так, дайте мені знати

— Маурісіо Грація Гутьеррес
джерело

1

Поєднання preventDefault()і returnToPreviousPage()є ідеальним і елегантним. Це перериває нормальну роботу так само, як ви б спроектували роботу будь-якого виловлювача винятків. +1.

— 1934286

1

Відповіді Геманта та Вікрама не дуже спрацювали для мене в Chrome. Подія.preventDefault (); Сценарій забороняє надсилати сторінку незалежно від проходження чи відмови перевірки. Натомість мені довелося перемістити подію.preventDefault (); в оператор if наступним чином:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Дякую Геманту та Вікраму за те, що поставили мене на правильний шлях.

— Джесперай
джерело

Працював і для мене. Дякую.

— ivbtar

1

Наприклад, якщо у вас є форма подання у формі, впорядкувати, щоб зупинити її пропонування просто напишіть event.preventDefault (); у функції, яка викликається натисканням кнопки подання або кнопки введення.

— Dheeraj Nalawade
джерело

0

Просто зробіть це….

<form>
<!-- Your Input Elements -->
</form>

і ось ваш JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— Матей Годжра
джерело

1

y ви тут використали jquery?

— Сельва Ганапаті