单击提交按钮后，我的 HTML 表单无法提交答案

【问题标题】：Can't get my HTML form to NOT submit upon clicking Submit button单击提交按钮后，我的 HTML 表单无法提交
【发布时间】：2017-03-26 23:06:20
【问题描述】：

我有一个 HTML 表单。我被要求编写 JS 代码来验证表单中的数据并在同一页面上显示验证结果，而无需提交表单。我被告知让我的 JS 函数（在单击提交时执行）返回 false，以便不提交表单。我这样做了，但是当我运行我的页面时，表单验证的结果在页面上闪烁了半秒钟，然后在提交表单时消失了。我究竟做错了什么？这是我在 JS 中的内容：（第一个函数将事件侦听器添加到表单的提交按钮）

function eventListener(){ 
var submitBtn = document.getElementById("sub");
submitBtn.addEventListener("click", validate, false);
}

function validate(){
    var input1 = document.getElementById("book_1").value;
    var input2 = document.getElementById("book_2").value;
    var input3 = document.getElementById("book_3").value;
    if(input1=="" || input2=="" || input3=="")
        window.alert("Error: Please fill in all input fields");
    else if(isNaN(input1) || isNaN(input2) || isNaN(input3))
        window.alert("Error: Please enter numbers in the input fields");
    else{
        var total1 = input1*19.99;
        var total2 = input2*86;
        var total3 = input3*55;
        var grandtotal = total1 + total2 + total3;
        var container = document.getElementById("container");
        var par = document.createElement("p");
        container.appendChild(par);
        par.innerHTML = "<h3>Basic XHTML (Quantity: " + input1 + "):</h3> $" + (total1)
                + "<br/> <h3>Intro to PHP (Quantity: " + input2 + "):</h3> $" + (total2)
                + "<br/> <h3>Advanced JQuery (Quantity: " + input3 + "):</h3> $" + (total3)
                + "<br/><br/> <h3>Final Total:</h3> $" + grandtotal;
    }
    return false;
}

window.onload = eventListener;

【问题讨论】：

将提交监听器放在表单的提交处理程序上，而不是按钮上。可以在不点击按钮的情况下提交表单，并且从表单的处理程序中取消提交更简单。

标签： javascript

【解决方案1】：

将事件传递给 validate 函数并设置 preventDefault，如下所示：

function validate(event){
  event.preventDefault();
  // your code here
}

如果需要，使用 .submit() 验证后提交表单；

【讨论】：

【解决方案2】：

只需将侦听器移动到表单：

function stopSubmit(){
  return false;
}

window.onolad = function() {
  document.getElementById('f0').addEventListener('submit', stopSubmit, false);
}

<form id="f0">
  <input value="foo" name="foo">
  <button>Submit</button>
</form>

监听器无论如何都应该在表单上，因为它可以在不点击按钮的情况下提交。

附言。

表单似乎无论如何都在堆栈sn-ps中提交，但将其放在页面中并且代码可以工作。

【讨论】：