title: Fill form with table row data using javascript
body: <p>I am having trouble filling a form with table data.The form is in a modal dialogue and I want the dialogue to popup with inputs filled when the user clicks on the glyphicon, glyphicon-pencil. </p>
  
  <p>I have looked at <a href="https://stackoverflow.com/questions/19651540/fill-form-using-table-data">Fill form using table data</a>, <a href="https://stackoverflow.com/questions/27649397/how-to-fill-input-fields-in-form-with-data-from-row-in-html-table-i-want-to-edit">How to fill input fields in form with data from row in html table I want to edit</a>, <a href="https://stackoverflow.com/questions/7115611/jquery-dynamic-fill-in-form-fields-with-table-data">jQuery dynamic fill in form fields with table data</a>, and <a href="https://stackoverflow.com/questions/23431569/automatic-fill-a-table-with-data-using-javascript-and-json">Automatic fill a table with data using JavaScript and JSON</a>, and none of their solutions worked for me, so please help. 
  here is the modal and form code:</p>
  
  <pre><code>&lt;div class="modal fade" id="New-Employee-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Employee&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  
                  &lt;div id="data"&gt;
                      &lt;form id="person"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;First Name:&lt;/label&gt;
                              &lt;input class="form-control" id="FirstName" name="FirstName" type="text"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Last Name:&lt;/label&gt;
                              &lt;input class="form-control" id="LastName" name="LastName" type="text"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Net Id:&lt;/label&gt;
                              &lt;input class="form-control" id="NetId" name="Netid" type="text"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Phone #:&lt;/label&gt;
                              &lt;input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Email:&lt;/label&gt;
                              &lt;input class="form-control" id="Email" name="Email" type="text"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Role&lt;/label&gt;
                              &lt;input class="form-control" id="Role" name="Role" type="text"&gt;
  
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;Active:&lt;/label&gt;
                              &lt;br /&gt;
                              &lt;input name="Active" type="radio" value='&lt;span class="glyphicon glyphicon-ok-circle"&gt;' /&gt; Active
                              &lt;br /&gt;
                              &lt;input name="Active" type="radio" value='&lt;span class="glyphicon glyphicon-ban-circle"&gt;' /&gt; Not Active
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" onclick="ResetForm()"&gt;Reset&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AddData()"&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the part of the table: </p>
  
  <pre><code>&lt;div id="tab"&gt;
      &lt;table class="table table-striped" id="list"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Net ID&lt;/th&gt;
                  &lt;th&gt;Phone #&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Active&lt;/th&gt;
                  &lt;th&gt;Role&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Joel&lt;/td&gt;
                  &lt;td&gt;lewis&lt;/td&gt;
                  &lt;td&gt;lewisj&lt;/td&gt;
                  &lt;td&gt;333-555-3667&lt;/td&gt;
                  &lt;td&gt;lewisj@gmail.com&lt;/td&gt;
                  &lt;td&gt;
                      &lt;a id="icon-toggle" class="btn-default"&gt;
                          &lt;span class="glyphicon glyphicon-ok-circle" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Developer&lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="glyphicon glyphicon-pencil" data-target="#New-Employee-Modal" onclick="UpdateForm()" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;a id="icon-toggle-delete" class="removebutton"&gt;
                          &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;/a&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>and here is the javascript:</p>
  
  <pre><code>function AddData() {
      var rows = "";
      var FirstName = document.getElementById("FirstName").value;
      var LastName = document.getElementById("LastName").value;
      var NetId = document.getElementById("NetId").value;
      var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
      var Email = document.getElementById("Email").value;
      var Active = document.querySelector('input[name="Active"]:checked');
      Active = Active ? Active.value : '';
      var Role = document.getElementById("Role").value;
      rows += "&lt;td&gt;" + FirstName + "&lt;/td&gt;&lt;td&gt;" + LastName + "&lt;/td&gt;&lt;td&gt;" + NetId + "&lt;/td&gt;&lt;td&gt;" + PhoneNumber + "&lt;/td&gt;&lt;td&gt;" + Email + "&lt;/td&gt;&lt;td&gt;" + Active + "&lt;/td&gt;&lt;td&gt;" + Role + '&lt;/td&gt;&lt;td&gt;  &lt;span class="glyphicon glyphicon-pencil" aria-hidden="true"&gt;&lt;/span&gt; &lt;a id="icon-toggle-delete2" class="removebutton"&gt;  &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt; &lt;/a&gt;&lt;/td&gt;';
      var tbody = document.querySelector("#list tbody");
      var tr = document.createElement("tr");
  
      tr.innerHTML = rows;
      tbody.appendChild(tr)
  
  }
  
  function UpdateForm() {
  
      $('span.glyphicon glyphicon-pencil').click(function() {
          //! Don't know what do here
      });
  
  }
  
  function ResetForm() {
      document.getElementById("person").reset();
  }
  </code></pre>
  
  <p>here is the jsfiddle <a href="http://jsfiddle.net/neu4gh37/2/" rel="nofollow noreferrer">http://jsfiddle.net/neu4gh37/2/</a></p>