为什么我提交表单时出现空白页？答案

【问题标题】：Why is a blank page appearing when I submit my form?为什么我提交表单时出现空白页？
【发布时间】：2016-02-16 11:39:11
【问题描述】：

当我提交表单时，会出现一个空白页面。我想留在同一页面上。

HTML：

<form id='credentials'>
     <div class="field">
          <label for="name">Username:</label>
          <input type="text" id="name" name="username" />
     </div>
     <div class="field">
          <button type="submit">Send</button>
     </div>
</form>

JavaScript：

if (localStorage) {  // checks for localStorage support
    // add event listener for form submission
        document.getElementById('credentials').addEventListener('submit', function() {
            // get value of username field
            var username = document.getElementById('username').value;
            console.log('submitted')
            // save name in localStorage
            localStorage.setItem('name', username);
        });
} else {
    console.log('no localStorage');
}

【问题讨论】：

return false; 在提交事件监听器中应该可以解决问题
你似乎没有id为username的元素
除了错别字，没有。你能设置一个测试用例吗，比如jsfiddle.net？（我认为现在 SO 也对此提供了内置支持，但老实说我不知道它是如何工作的）

标签： html forms attributes local-storage

【解决方案1】：

起初，我在提交事件监听器中使用了return false;，但后来我读到一篇文章说return false; 的这种用法被广泛滥用，因为它似乎在做我们想做的事。实际上，它对您的代码施加了限制，降低了它的灵活性，增加了维护它的难度。

文章：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

我在提交事件监听器中成功使用event.preventDefault() 来阻止表单被提交。

【讨论】：