停止表单提交的一种方法是从JavaScript函数返回false。

当单击提交按钮时,将调用验证函数。我有一个表单验证的案例。如果满足这个条件,我调用一个名为returnToPreviousPage()的函数;

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

我正在使用JavaScript和Dojo工具包。

它不是返回到前一页,而是提交表单。我如何终止这次提交并返回到上一页?


当前回答

简单地去做....

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

这就是你的JQuery

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

其他回答

使用防止默认

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

只需使用一个简单的按钮,而不是提交按钮。并调用JavaScript函数来处理表单提交:

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

函数:

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

你也可以尝试window.history.forward(-1);

我建议不要使用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>

下面是confirmAction函数的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(edge), Safari等。

如果不是这样,请告诉我

尽管这看起来很明显,但应该注意的是,如果验证良好,如果你用防止默认阻止提交,你还必须提交你的表单。下面我提供了一个完整的示例,验证文档类型,然后提交如果它是正确的文档类型。

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