用于onclick脚本处理的<button>和<input type =“button”/>之间的差异

Question

我有一段javascript来验证表单中的条目。它看起来像这样：

    function testSubmit() {
        var x = document.forms["myForm"]["input1"];
        if (x.value == "") {
            alert('Not allowed!!');
            return false;
        }
        return true;
    }

    function submitForm() {
        if (testSubmit()) {
            document.forms["myForm"].submit();
            document.forms["myForm"].reset();
        }
    }

我使用onclick =＆＃34; submitForm（）＆＃34;要调用它，但是当我使用按钮标签时，它似乎只是通过整个检查并执行发布的表单操作。如果我使用type =＆＃34; button＆＃34;的输入标签，那就像预期的那样工作。两个标签之间的工作原理有何不同？这是一个显示问题的codepen：http://codepen.io/anon/pen/OyVGQQ

右边的按钮会给你一个弹出窗口，让你回到表格。左侧的按钮为您提供弹出窗口，但随后尝试发布表单。

Answer 1

在您的笔中，您正在使用<button type="submit" onclick="submitForm()" />。如果您不想默认提交，则必须使用type="button"。