Код JavaScript для остановки отправки формы
один из способов остановить отправку формы-вернуть false из вашей функции JavaScript.
при нажатии кнопки Отправить вызывается функция проверки. У меня есть случай в форме проверки. Если это условие выполняется, я вызываю функцию с именем returnToPreviousPage();
function returnToPreviousPage() {
window.history.back();
}
Я использую JavaScript и Dojo Toolkit.
вместо того, чтобы вернуться к предыдущей странице, он отправляет форму. Как я могу прервать это представление и вернуться на предыдущую страницу?
12 ответов:
вы можете использовать возвращаемое значение функции, чтобы предотвратить отправку формы
<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>В случае хрома 27.0.1453.116 M, Если выше код не работает, пожалуйста установите returnValue параметра обработчика событий
использовать запретить по умолчанию
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(); }); }
на данный момент работает следующее (проверено в Chrome и Firefox):
<form onsubmit="event.preventDefault(); validateMyForm();">где validateMyForm () - это функция, которая возвращает
falseесли проверка терпит неудачу. Ключевым моментом является использование имениevent. Мы не можем использовать, например,e.preventDefault().
просто используйте простой
buttonвместо кнопки "Отправить". И вызовите функцию JavaScript для обработки формы submit:<input type="button" name="submit" value="submit" onclick="submit_form();"/>
все ваши ответы дали что-то для работы.
наконец, это сработало для меня: (если вы не выберете хотя бы один элемент флажка, он предупреждает и остается на той же странице)
<!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>
Я бы рекомендовал не использовать
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; } }
Допустим, у вас есть форма, похожая на эту
<form action="membersDeleteAllData.html" method="post"> <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button> </form>вот javascript для функции confirmAction
<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 (edge), Safari и т. д.
Если это не так, дайте мне знать
ответы Хеманта и Викрама не совсем работали для меня прямо в 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; }спасибо Хеманту и Викраму за то, что поставили меня на правильный путь.
например, если у вас есть кнопка "Отправить" на форме ,чтобы остановить ее предложение, просто напишите событие.preventDefault (); в функции, которая вызывается при нажатии кнопки отправки или кнопки ввода.
Просто сделай это....
<form> <!-- Your Input Elements --> </form>и вот идет ваш JQuery
$(document).on('submit', 'form', function(e){ e.preventDefault(); //your code goes here //100% works });
Comments