停止表单提交的一种方法是从JavaScript函数返回false。
当单击提交按钮时,将调用验证函数。我有一个表单验证的案例。如果满足这个条件,我调用一个名为returnToPreviousPage()的函数;
function returnToPreviousPage() {
window.history.back();
}
我正在使用JavaScript和Dojo工具包。
它不是返回到前一页,而是提交表单。我如何终止这次提交并返回到上一页?
停止表单提交的一种方法是从JavaScript函数返回false。
当单击提交按钮时,将调用验证函数。我有一个表单验证的案例。如果满足这个条件,我调用一个名为returnToPreviousPage()的函数;
function returnToPreviousPage() {
window.history.back();
}
我正在使用JavaScript和Dojo工具包。
它不是返回到前一页,而是提交表单。我如何终止这次提交并返回到上一页?
当前回答
例如,如果你在表单上有提交按钮,为了阻止它的传播,只需编写event.preventDefault();在点击提交按钮或进入按钮时调用的函数中。
其他回答
尽管这看起来很明显,但应该注意的是,如果验证良好,如果你用防止默认阻止提交,你还必须提交你的表单。下面我提供了一个完整的示例,验证文档类型,然后提交如果它是正确的文档类型。
<h2>Document Upload</h2>
<script>
var CanContinue = false;
function validateMyForm()
{
if(CanContinue == false)
{
alert("You must upload a PDF, PNG, or JPG of your document.");
return false;
}
document.getElementById("myForm").submit();
return true;
}
function getFileNameWithExt(event) {
if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
return;
}
const name = event.target.files[0].name;
const lastDot = name.lastIndexOf('.');
const fileName = name.substring(0, lastDot);
const ext = (name.substring(lastDot + 1)).toUpperCase();
if (ext =="JPG") {
extension.value = "image/jpeg";
CanContinue = true;
} else if (ext =="JPEG") {
extension.value = "image/jpeg";
CanContinue = true;
} else if (ext =="PNG") {
extension.value = "image/png";
CanContinue = true;
} else if (ext =="PDF") {
extension.value = "application/pdf";
CanContinue = true;
} else {
alert("You must upload a PDF, PNG, or JPG of your document.");
CanContinue = false;
}
outputfile.value = fileName;
}
</script>
<form method="post" id="myForm" action="/wheregoing" enctype="multipart/form-data" onsubmit="event.preventDefault(); validateMyForm();">
Please upload a JPG, PNG, or PDF of the front of the document.
<input id='inputfile' type="file" name="dafile" onChange='getFileNameWithExt(event)' required>
<input id='extension' type='hidden' name='ContentType' value="">
<input type="submit">
</form>
我建议不要使用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;
}
}
使用防止默认
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();
});
}
例如,如果你在表单上有提交按钮,为了阻止它的传播,只需编写event.preventDefault();在点击提交按钮或进入按钮时调用的函数中。
禁用提交按钮也可以帮助阻止表单提交。
<input style="display:none" type="submit" disabled>