title: How to pass multiple values to Bootstrap pop-up from anchor tag?
body: <p>I am displaying some fields in a table with labels and also an anchor tag to edit the data.</p>
  
  <p>When the user clicks the Edit Link, the pop is shown with Current Value and also have a textbox to Update the Value with new one.</p>
  
  <p>I want to pass the current value of Lable to the pop-up and also the column name which will be hidden from the user by which I can easily get the column name which have to be updated.</p>
  
  <p>I want to pass column name because there many fields in this page but I have developed only one pop-up for all, so the data which will shown in pop-up will be dynamic as it depends upon the anchor which was clicked.</p>
  
  <p>This is My Modal-PopUp Code :</p>
  
  <pre><code>  &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&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-hidden="true"&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit Information&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-md-3"&gt;
                                Current Value :
                            &lt;/div&gt;
                            &lt;div class="col-md-6"&gt;
                                &lt;asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"&gt;&lt;/asp:TextBox&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                          &lt;div class="row"&gt;
                            &lt;div class="col-md-3"&gt;
                                New Value :
                            &lt;/div&gt;
                            &lt;div class="col-md-6"&gt;
                                &lt;asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"&gt;&lt;/asp:TextBox&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-primary"&gt;Save Changes&lt;/button&gt;
                          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here I am calling the Modal Pop-up :</p>
  
  <pre><code>     &lt;th style="width:15%;"&gt;First Name :&lt;/th&gt;
   &lt;td style="width:18%;"&gt;
  &lt;asp:Label runat="server" ID="lbl_fname"&gt;&lt;/asp:Label&gt;
  &lt;span&gt; &lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;                                                                 &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;                                                           &lt;/a&gt; &amp;nbsp;&amp;nbsp;
   &lt;i class="fa fa-exclamation-triangle" aria-hidden="true"&gt;&lt;/i&gt;   
   &lt;/span&gt;
   &lt;/td&gt;
  </code></pre>
  
  <p>I've gone through many links but couldn't fine the solution for passing multiple values.</p>
  
  <p>Can any any one please help me.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I tried the following code using javascript but it still not working :</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(function () {
  
              $(".edit").click(function () {
  
                  var tr = $(this).parent().parent();
                  var tdRecords = $(tr).children();
                  var firstName = $(tdRecords[0]).text();
                  var lastName = $(tdRecords[1]).text();
  
                  $("#Curr_Val").val(firstName);
  
                  $('#myModal').modal('show');
              });
          });
      &lt;/script&gt;
       &lt;script type="text/javascript"&gt;
       var $ = jQuery;
       $(document).ready(function () {
       var selectedTab = $("#&lt;%=hfTab.ClientID%&gt;");
       var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
       $('#dvTab a[href="#' + tabId + '"]').tab('show');
       $("#dvTab a").click(function () {
       selectedTab.val($(this).attr("href").substring(1));
       });
         });
    &lt;/script&gt; 
  
    &lt;style&gt;
    body {
    text-align:left;
    color:#000000;
      }
    &lt;/style&gt;
       &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
   &lt;/asp:ScriptManager&gt;
    &lt;!-- Top content --&gt;
     &lt;div class="top-content"&gt; 
  
       &lt;div class="inner-bg"&gt;
          &lt;div class="container" style="margin-top:-50px;"&gt;                   
             &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 myprofilediv" style="vertical-align:central;"&gt;                    
                     &lt;div class="panel panel-default" style="padding:10px;"&gt;
                       &lt;div class="row"&gt;
                          &lt;div class="col-md-3 col-md-offset-9"&gt;
                             &lt;a class="btn btn-link-1" href="MyProfile.aspx?do=edit" style="font-weight:bold; float:right;"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Edit My Profile&lt;/a&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                      &lt;h1 class="wow fadeInLeftBig profilehead"&gt;My Profile&lt;/h1&gt;&lt;br /&gt;
                                  &lt;div id="dvTab"&gt;
                                      &lt;ul class="nav nav-tabs" role="tablist"&gt;
                                          &lt;li&gt;&lt;a href="#personal" aria-controls="personal" role="tab" data-toggle="tab"&gt;Personal Information&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#fund" aria-controls="pf" role="tab" data-toggle="tab"&gt;Fund Nominee&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#edu" aria-controls="edu" role="tab" data-toggle="tab"&gt;Education Details&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#fam" aria-controls="fam" role="tab" data-toggle="tab"&gt;Family Details&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab"&gt;Employment History&lt;/a&gt;&lt;/li&gt;
  
                                      &lt;/ul&gt;
                                      &lt;div class="tab-content"&gt;
                                          &lt;div id="personal" role="tabpanel" class="tab-pane active"&gt;
  
                                              &lt;table style="height:15%;" class="table"&gt;
                                                     &lt;tr&gt;
                                                         &lt;td style="width:60%;"&gt; &lt;br /&gt;   &lt;h3 style="text-align:center;"&gt;Personal Information&lt;/h3&gt; &lt;/td&gt;
                                                         &lt;td style="width:12%;"&gt;&lt;br /&gt;&lt;asp:Image runat="server" ImageUrl="ImgHandler.ashx?typ=profile&amp;emp=46" /&gt;&lt;/td&gt;
                                                     &lt;/tr&gt;
                                                 &lt;/table&gt;
                                              &lt;br /&gt;
                                              &lt;table class="table-responsive table table-bordered mytable"&gt;
                                              &lt;tr&gt;
                                                  &lt;th style="width:15%;"&gt;First Name :&lt;/th&gt;
                                                  &lt;td style="width:18%;"&gt;
                                                      &lt;asp:Label runat="server" ID="lbl_fname"&gt;&lt;/asp:Label&gt;
  
                                                          &lt;%-- &lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;--%&gt;
                                                         &lt;a class="edit" href="#"&gt;
                                                               &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                                                           &lt;/a&gt;
                                                         &amp;nbsp;&amp;nbsp;
                                                         &lt;i class="fa fa-exclamation-triangle" aria-hidden="true"&gt;&lt;/i&gt;
  
  
                                                  &lt;/td&gt;
                                                  &lt;th style="width:13%;"&gt;Middle Name :&lt;/th&gt;
                                                  &lt;td style="width:20%;"&gt;
                                                      &lt;asp:Label runat="server" ID="lbl_mname"&gt;&lt;/asp:Label&gt;
                                                  &lt;/td&gt;
                                                  &lt;th style="width:18%;"&gt;Last Name :&lt;/th&gt;
                                                  &lt;td style="width:20%;"&gt;
                                                      &lt;asp:Label runat="server" ID="lbl_lname"&gt;&lt;/asp:Label&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
  </code></pre>