Question

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

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');
}

Answer 1

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

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

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

为什么我提交表单时会出现空白页面？

1 个答案: