html - Why is a blank page appearing when I submit my form? -

when submit form, blank page appears. want stay on same page.

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 localstorage support     // add event listener form submission         document.getelementbyid('credentials').addeventlistener('submit', function() {             // 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'); } 

at first, used return false; in submit event listener, read article said such usage of return false; misused, since appears doing want. in reality, places restrictions on code, reducing flexibility, increasing difficulty of maintaining it.

the article: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

i used event.preventdefault() in submit event listener prevent form being submitted.