JavaScript-код для остановки отправки формы - PullRequest
Новая
       29

JavaScript-код для остановки отправки формы

173 голосов
/ 29 декабря 2011

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

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

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

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

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

Ответы [ 11 ]

243 голосов
/ 29 декабря 2011

Вы можете использовать возвращаемое значение функции, чтобы предотвратить отправку формы 

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

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

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

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

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

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

107 голосов
/ 29 декабря 2011

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

Инструментарий Dojo 

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

jQuery 

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

Vanilla 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();
    });
}
40 голосов
/ 14 мая 2014

На данный момент работает следующее (протестировано в Chrome и Firefox): 

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

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

14 голосов
/ 29 декабря 2011

Просто используйте простой 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);

5 голосов
/ 19 марта 2016

Все ваши ответы дали что-то для работы.

НАКОНЕЦ, это сработало для меня: (если вы не выбрали хотя бы один элемент-флажок, он предупреждает и остается на той же странице) 

<!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>
3 голосов
/ 23 мая 2018

Я бы порекомендовал не использовать 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;
  }
}
3 голосов
/ 03 августа 2017

Множество сложных способов сделать простую вещь: 

<form name="foo" onsubmit="return false">
1 голос
/ 12 июля 2016

Ответы Хеманта и Викрама не совсем сработали для меня в 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;
    }

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

0 голосов
/ 25 апреля 2018

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

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

и вот ваш JQuery 

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
0 голосов
/ 30 декабря 2016

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

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

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

...