javascript - 尽管 novalidate 和 false 返回,表单提交后仍重新加载页面

标签 javascript html forms validation reload

我开始在 JS 中研究任务列表制作器的框架,在注意到通过表单提交任务后,整个页面都会重新加载,所以我无法进行太深入的研究。设置文本而不使其立即消失。

我在 HTML 表单中使用了 novalidate ,并且在表单提交时调用的函数中返回了 false ,所以我不确定问题是什么是。我的代码附在这个CodePen中:http://cdpn.io/JArfm

一些相关代码:

HTML:

<body>
    <form action="#" method="post" id="theForm" novalidate="">
        <fieldset><legend>To-dolist</legend>
            <p>Add things to-do on your list</p>
            <div class="addTasks"><label for="addTask">Event name:</label><input type="text" name="addTask" id="addTask" value="addTask"></div>
            <div><input type="submit" value="Add task!" id="submit"></div>
            <div id="output"></div>
        </fieldset>
    </form>
</body>

JS:

(function(){

    function addTask(e){
    'use strict';

    if (typeof e == 'undefined') e = window.event;

    var task = U.$('addTask').value;

    U.setText('output', task);
    return false;
    }


    window.onload = function(){
        "use strict";

        U.addEvent(U.$('theForm'), "submit", addTask);
    };
})();

最佳答案

显然,在使用传统事件注册模型 (element.onsubmit = doThis;) 时,在事件处理函数中返回 false 只会正确停止表单提交。由于我使用了addEventListener和attachEvent函数,处理这个问题的正确方法(不修改标记)是将其添加到我的事件处理函数的末尾:

if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}
return false;

调用 preventDefault 方法或将 returnValue 设置为 false(对于

关于javascript - 尽管 novalidate 和 false 返回,表单提交后仍重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14568098/

相关文章:

javascript - 使用相同的 Parse 应用查找 Facebook 好友

javascript - RoR Rails,f.select onchange of value,使部分 html 可见

html - 不同的浏览器以不同的方式显示 HTML

javascript - jQuery 换行没有容器的文本

javascript - 如何在受 javascript 滚动和高度范围限制的滚动时按比例减小元素高度?

javascript - 如何在 JavaScript 中将字符串数组转换为对象数组?

javascript - 如何检查一个分区中的所有单选按钮组是否都被选中?

javascript - 在订阅按钮后获取 javascript 答案的问题

jquery - 使用 Jquery 克隆输入但使用空值

html - 跨 DIV 拆分的表单 - CSS 不起作用