title: How do I populate HTML form with database values when I click edit button?
body: <p>I want to populate form fields with database values when I click the edit button. The form I want to populate is responsible for updating a diary entry's attributes (which comprise of title and body).</p>
  
  <p>Currently when I click the edit button, I get an empty edit form. Therefore, if I want to retain some existing information on the entry (for example the body of the entry), I have to copy the body of the entry into the edit form before I update the entry which is a cumbersome task.</p>
  
  <p>How do I go about implementing this?</p>
  
  <p><strong>Function for updating a diary entry</strong></p>
  
  <pre><code>function edit_entry(entry_id){
      // open modal to edit diary entry
      var modal = document.getElementById('edit_modal');
  
      modal.style.display = "block";
  
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      };
      document.getElementById('edit_modal').addEventListener('submit', updateDetail);
  
      function updateDetail(e){
          e.preventDefault();
          let title = document.getElementById('title').value;
          let body = document.getElementById('body').value;
  
          var statusCode;
  
          fetch('http://localhost:5000/api/v1/entries/'+parseInt(entry_id),{
              method: 'PUT',
              headers: {
                  'Content-Type': 'application/json',
                  'Authorization': 'Bearer ' + window.localStorage.getItem('token')
              },
              body: JSON.stringify({
                  "title": title,
                  "body": body,
              })    
          })
          .then((result) =&gt; {    
              statusCode = result.status;
              return result.json();
          })
          .then((data) =&gt;{    
              window.alert(data.message);
              modal.style.display = "none";
              redirect: window.location.replace('./viewAllEntries.html');    
          });    
      }    
  }
  </code></pre>
  
  <p><strong>HTML form</strong></p>
  
  <pre><code>&lt;form action="" class ="add-content" id="edit_modal"&gt;    
      &lt;h2&gt;My Diary | Edit Entry &lt;i class="fa fa-book" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h2&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;&lt;/label&gt;
          &lt;textarea id = "title" class ="input-control"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;&lt;/label&gt;
          &lt;textarea id = "body" class ="input-control"&gt;  &lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div class ="form-group"&gt;
          &lt;label&gt;&amp;nbsp&lt;/label&gt;
          &lt;button type = "submit" class ="button button-block" /&gt;Save &lt;i class="fa fa-floppy-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>