Question

这是我的示例代码：

<button onClick="CheckData()" type="submit">

我在CheckData函数中有一些条件：

if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}

然后我检查：

if (warning.length>0) {
   return confirm(warning);
} else {
   return true; //also tried false
}

所以我需要前两个条件的确认对话框，否则，我不希望显示该对话框。

现在，当满足前两个条件之一时，将弹出确认对话框，但是当我单击“取消”时，它仍将提交表单。

有什么建议吗？

PS：此代码是演示，与实际演示不同。但是概念是相同的。

Answer 1

将HTML更改为此：

<form onsubmit="return CheckData()">
    <button type="submit" />
    ...
</form>

说明：

提交表单后，将调用onsubmit事件处理程序。
事件处理程序返回false后，提交将被中止。

Answer 2

您可以将event对象传递给CheckData函数，并在确认返回event.preventDefault()时返回false来阻止默认操作。

<form>
<button onClick="CheckData(event)" type="submit">Submit</button>
</form>
<script>
function CheckData(e){
 var warning;
	if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}
if (warning.length>0) {
   var con = confirm(warning);
   if(con){
   return true;
   } else {
   e.preventDefault();
   return false;
   }
} else {
   return true; 
}
}
</script>

您还可以return CheckData的结果，因此如果默认操作返回false，将阻止该默认操作。

<form>
<button onClick="return CheckData()" type="submit">Submit</button>
</form>
<script>
function CheckData(){
 var warning;
	if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}
if (warning.length>0) {
   var con = confirm(warning);
   return con;
} else {
   return true; 
}
}
</script>

为什么取消确认对话框后提交我的表格？

2 个答案: