title: Fill the currrent data to bootstrap form
body: <p>I'm using the bootstrap4 framework for my web application. Here's my requirement
  I have a table generated with some values &amp; each row has a edit button at the end of the row (last column).
  when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with  bootstrap4 framework i dont know the correct way to do this .
  This is my table</p>
  <pre><code>        &lt;div class=&quot;table-responsive&quot;&gt;
            &lt;table class=&quot;table table-hover table-dark&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;Channel No&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Channel Name&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Descrption&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Recording Status&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Edit&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;TV 1&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
        &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot; data-target=&quot;#ModalLoginForm&quot;&gt;
    Edit
  &lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;TV 2&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;TV 3&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;4&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;Derana&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;5&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;TV 5&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;6&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;TV 6&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;7&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;TV 7&lt;/td&gt;
             &lt;td&gt;Y&lt;/td&gt;
            &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Edit&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt; 
  </code></pre>
  <p>This is the edit button</p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot; data-target=&quot;#ModalLoginForm&quot; &gt;
    Edit
  &lt;/button&gt;
  </code></pre>
  <p>This is my POP form(modal) for the edit button</p>
  <pre><code>&lt;div id=&quot;ModalLoginForm&quot; class=&quot;modal fade&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
             
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;form role=&quot;form&quot; method=&quot;POST&quot; action=&quot;&quot;&gt;
                      &lt;input type=&quot;hidden&quot; name=&quot;_token&quot; value=&quot;&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label class=&quot;control-label&quot;&gt;Channel No&lt;/label&gt;
                          &lt;div&gt;
                              &lt;input type=&quot;number&quot; class=&quot;form-control input-lg&quot; name=&quot;channelid&quot; value=&quot;&quot;&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label class=&quot;control-label&quot;&gt;Channel Name&lt;/label&gt;
                          &lt;div&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control input-lg&quot; name=&quot;channel&quot;&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                        &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label class=&quot;control-label&quot;&gt;Description&lt;/label&gt;
                          &lt;div&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control input-lg&quot; name=&quot;description&quot;&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          
                        &lt;div class=&quot;checkbox&quot;&gt;
                                  &lt;label&gt;
                                      &lt;input type=&quot;checkbox&quot; name=&quot;remember&quot;&gt; Channel Recordable
                                  &lt;/label&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;div&gt;
                              
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;div&gt;
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Update&lt;/button&gt;
   
                          
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;  
  </code></pre>