Nick Lewis Nick Lewis - 28 days ago 12
Javascript Question

duplicate entry in localstorage - Javascript

I'm attempting to build a simple address book app using a more OOP approach.

Currently it adds to localStorage without problem; but the next task I wanted to accomplish was a function that displays the Key => value pairs within the HTML. I'm stuck at the first hurdle.

When I call the

displayContacts()
function on the click event, it is creating another empty object within the LocalStorage. Every time I reload the page and click the 'find' button (and assuming no additional information has been added to the form), a new entry will be added to localStorage such as:


{"first_name":"","last_name":"","email":"","telephone":""}


Thanks in advance

< !-- begin snippet: js hide: false console: true babel: false -->

var addressBook = {

people : JSON.parse(localStorage.getItem('contacts')) || [],


cacheDom : function(){
this.$parent = $('.address_book');
this.$display = $('.find_contacts');
},

bindEvent : function(){
this.$parent.on('submit', this.getFormData.bind(this));
this.$display.on('click', this.displayContacts.bind(this));

},

getStorage : function(param){
return localStorage.getItem();
},

setStorage : function(){
var storage = localStorage.getItem("contacts");
localStorage.setItem("contacts", JSON.stringify(this.people));

},

displayContacts : function(){
var contacts = this.people;
console.log(contacts);

},

getFormData : function(e){
var contacts = {};
var target = e.target.length;
for(var i = 0; i < target; i++){
if(e.target[i].nodeName === "INPUT"){
contacts[e.target[i].name] = e.target[i].value;
/*console.log(contacts);*/
}
}

this.people.push(contacts);
this.setStorage();


return false;
},




render: function(){

},

init : function(){
this.cacheDom();
this.bindEvent();
this.setStorage();
}
}

addressBook.init();


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="./bootstrap-3.3.7-dist/css/custom.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="row wrapper">
<div class="col-md-4 input_field">

<form class="address_book" method="post">
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control first_name" id="exampleInputEmail1" placeholder="First Name" name="first_name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Last Name" name="last_name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Telephone</label>
<input type="number" class="form-control" id="exampleInputPassword1" placeholder="Phone Number" name="telephone">
</div>


<button type="submit" class="btn btn-default submit_to_storage">Submit</button>
<button type="edit" class="btn btn-default submit_to_storage">edit</button>
<button type="delete" class="btn btn-default submit_to_storage">delete</button>
<button type="find" class="btn btn-default find_contacts">find</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-push-10 output">

</div>

</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./bootstrap-3.3.7-dist/js/localStorage.class.js"></script>
</body>

</html>



Answer

Your button is of type find

<button type="find" class="btn btn-default find_contacts">

This is not a valid type, and instead the button goes back to the default type, which is submit.

A submit button inside a form, submits the form, so not only are you calling the click handler on the button, but the submit handler for the form as well, which inserts into localStorage.

This is why, when you click the button it inserts in to localStorage.
To fix the issue, add a type of button to all the buttons that aren't supposed to submit the form.

<button type="submit" class="btn btn-default submit_to_storage">Submit</button>
<button type="edit" class="btn btn-default submit_to_storage">edit</button>
<button type="delete" class="btn btn-default submit_to_storage">delete</button>
<button type="find" class="btn btn-default find_contacts">find</button>

The only valid types for a button are

  • submit
  • reset
  • button
Comments