Код JavaScript, чтобы остановить отправку формы

206

Один из способов остановить отправку формы - вернуть false из функции JavaScript.

При нажатии кнопки отправки вызывается функция проверки. У меня есть дело в форме проверки. Если это условие выполняется, я вызываю функцию с именем returnToPreviousPage ();

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

Я использую JavaScript и Dojo Toolkit .

Скорее возвращаясь к предыдущей странице, он отправляет форму. Как я могу прервать это представление и вернуться на предыдущую страницу?

javascript html forms

— Мухаммед Имран Тарик
источник

RU Конечно, эта функция вызывает? попытаться поставить оповещение («тест»); до окна.история

— Самирпрограммист

Да, я уверен; его называют.

— Мухаммед Имран Тарик

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 m, если приведенный выше код не работает, пожалуйста, установите параметр обработчика события returnValue поле false, чтобы заставить его работать.

Спасибо Сэм за обмен информацией.

РЕДАКТИРОВАТЬ :

Спасибо Викраму за обходной путь, если validateMyForm () возвращает false:

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

где validateMyForm () - это функция, которая возвращает false в случае сбоя проверки. Ключевым моментом является использование имени события. Мы не можем использовать для egepreventDefault ()

— Хемант Металия
источник

1

Просто предположение: это не работает для меня в последней версии Chrome.

— Сэм

5

Все, что возвращается false, похоже, не имеет никакого эффекта; Chrome все еще отправляет форму. Например, onsubmit="return false;". Тем не менее, установка returnValueполя параметра обработчика событий falseдля меня работает.

— Сэм

3

Привет, Сэм / Хемант. Можете ли вы предоставить пример кода о том, как установить в поле returnValue параметра обработчика событий значение false, пожалуйста.

— JackDev

2

Я думаю, так как это принятый ответ, он, вероятно, должен сказать, как сделать это правильно. Я вместе с JackDev задаюсь вопросом, как заставить это работать должным образом. Как есть, это не работает

— Cruncher

1

Если validateMyForm()есть ошибки return falseне будут достигнуты. Так что это может потерпеть неудачу. Через много часов я нашел решение, которое работает, и разместил его ниже.

— Викрам Пуди

116

Использовать предотвращение по умолчанию

Dojo Toolkit

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 () вместо return false по многим причинам, это должен быть главный ответ: blog.nmsdvid.com/…

— acidjazz

1

Хороший ответ. Лучше, чем выбранный.

— Ани Менон

2

Хорошо, но где бы вы провели проверку, которую хочет OP?

— Саханд

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

— dku.rajkumar
источник

Мне нравится этот подход, потому что он учитывает мой вариант использования, обратные вызовы.

— Эдди

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>

— GDBA
источник

Работал на меня тоже.

— Четан

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использования атрибутов. Таким образом, вам не нужно будет прыгать вперед и назад во время чтения чужого кода

— Исаак Абрамовиц

Что делать, если кто-то нажимает кнопку ввода на одном из входов вместо нажатия кнопки? в общем

— ии

1

Допустим, у вас есть форма, похожая на эту

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

Вот javascript для функции verifyAction

<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. Event.preventDefault (); Сценарий запретил отправку страницы независимо от того, прошла или не прошла проверку. Вместо этого мне пришлось переместить event.preventDefault (); в операторе if следующим образом:

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

Спасибо Хеманту и Викраму за то, что поставили меня на правильный путь.

— Jesperai
источник

У меня тоже сработало. Спасибо.

— ivbtar

1

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

— Дирадж Налаваде
источник

0

Просто сделай это ....

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

и здесь идет ваш JQuery

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

— Мати Гойра
источник

1

ты использовал jquery здесь?

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