Почему появляется пустая страница, когда я отправляю свою форму?

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() в представить слушателю событий, чтобы предотвратить форму от их представления.