Cannot display edit form when clicked on edit button?

Question

I have made contact list app which displays contact details. By Default it shows 2 contact details. In index.html I have made 2 functions called showContacts() and editContact(id).

I am dynamically populating div tags i.e editcontact & contactlist in index.html

When I click on edit button it should show 3 input elements to take input from user and one submit button I tried to implement it (see code below) but only search bar disappear's and only default contacts are shown which should not be shown and it should display editing form.

var array = [];

function Person(fullName, number, group) {
  this.fullName = fullName;
  this.number = number;
  this.group = group;
  array.push(this);
}

Person.prototype.getFullName = function() {
  return this.fullName + ' ' + this.number + ' ' + this.group;
}

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");

console.log(array);

document.getElementById("contactlist").innerHTML = '';

function showContacts() {
  for (var i in array) {
    var id = i;
    contactlist.innerHTML +=
      `
            <ul>
            <div>
            <p>Name: ` + p1.fullName + `</p>
            <p>Number: ` + p1.number + `</p>
            <p>Group: ` + p1.group + `</p>
            <button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
            </div>
            `
  }
}

showContacts();

function editContact(id) {
  document.getElementById("search").style.display = 'none';
  document.getElementById("contactList").style.display = 'none';
  document.getElementById("editcontact").style.display = '';
  document.getElementById("editcontact").innerHTML =
    `<div>
            <input type="text"  placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
            <input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
            <input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
            <button type="button" class="btn btn-success">Submit</button>
            </div>`;
}

<div class="header">

  <div id="dropdown">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
              <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Family</a></li>
      </ul>
    </div>
  </div>

  <div class="title">
    <h2>All Contacts</h2>
  </div>

  <div class="button" id="addButton">
    <p>
      <a href="#">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a>
    </p>
  </div>

</div>

<div id="search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
      </div>
    </div>
  </form>
</div>

<div id="contactlist">

</div>

<div id="editcontact">

</div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">

screenshots :

1) Before on click editContact :

2) After onclick editContact :

Live demo can be seen here : https://jsfiddle.net/w2hoqmts/

Answer 1

A couple of things. You made a typo with your contactlist in your html (should be contactList). In your loop for showContacts you are setting id as index and should be like

function showContacts() {
    for (var i in array) {
        var id = array[i].number;
        document.getElementById("contactList").innerHTML +=
            '<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
            '<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
            '<button type="button" class="btn btn-danger">Delete</button>' +
            '</div>';
    }
}

Your editContact method is using the id as an index (as previous), which is wrong. You could do something like this instead (see code below). I filter the array with people based on the unique id provided from the link when you click edit.

function editContact(id) {
    var obj = array.filter(function (ele) {
        console.dir(ele);
        if (ele.number === id) return ele;

    });
    console.dir(obj);
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactList").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML =
        '<div>'+
        '<input type="text"  placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
        '<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
        '<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
        '<button type="button" class="btn btn-success">Submit</button>'+
       '</div>';
}

I've made a updated fiddle based on your own https://jsfiddle.net/w2hoqmts/3/

Answer 2

Following changes should be made in editContact() and showContacts() function.

function showContacts(){
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ p1.fullName +`</p>
        <p>Number: `+ p1.number +`</p>
        <p>Group: `+ p1.group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();


function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `<div>
        <input type="text"  placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
        <input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
        <input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
        <button type="button" class="btn btn-success">Submit</button>
        </div>`;
}