• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

Click on a Record in a table and it populates the fields in a text Box

Could really use your help on this one
  I have a table that has Records. I want to add the ability to click a record in the table and it populates the corresponding Textboxes. So  I want to do the following
                  1) click on an record in the table and have the name of the item go into the name text field, the day go into the day text field ect..

 PLEASE HELP
populating.docx
0
vcurtis
Asked:
vcurtis
  • 3
4 Solutions
 
becraigCommented:
Here is an idea on how to do it client side (Javascript)

http://forums.asp.net/t/1952769.aspx?Populate+Textbox+from+a+Cell+in+Gridview+without+Postback

Or with postback you can  something similar to below:

<asp:GridView ID="Gridview1" runat="server" DataKeyNames="Column1, Column2" ...>

Open in new window


Code Behind:

protected void GridView1_SelectedIndexChanged(Object sender, EventArgs e)
{
    GridViewRow email = GridView1.SelectedRow;
    txtbox.Text = (string)GridView1.DataKeys[email.RowIndex]["Column1"];    
}

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
Without knowing the code of your table I made up this sample that you can easily apply to your own.
http://jsbin.com/nuruseyo/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function() {
   $('.clickme').click(function(){    // This detects the click of the a href with class clickme
     var id = $(this).attr('data-id');   // Set the value of a new variable "id" by getting the value of the attribute, "data-id"
     var fullname=$(this).text();  // Set the value of a new variable "fullname" by getting the value of the text inside the td tag
    
     $('input[name="id"]').val(id);    //place the value of the variable, "id" to the input field "id"
     $('input[name="fullname"]').val(fullname);  //place the value of the variable, "fullname" to the input field "fullname"
     
   });
});
    </script>
  <meta charset="utf-8">
  <title>Padas Q_28404746</title>
</head>
<body>
<table>
  <!-- User your asp code to loop through your data and output the each row (tr) -->
  <tr><td><a href="#" data-id="abc134" class="clickme">Suzy Smith</a> <input name="id"><input name="fullname"><button>Submit</button></td></tr>
  </table>
</body>
</html>

Open in new window



This solution is using jquery, if you don't already have jquery loaded, you can download it http://jquery.com/ or use the link from the google cdn I have. The version I am  using is 1.x and will work with older ie browsers.  You will see there is also a jquery 2.x.  The only difference is the 1.x supports older ie and is therefor a bit larger file than 2.x
0
 
Scott Fell, EE MVEDeveloperCommented:
The big advantage of using js/jquery is one less trip to the server.  

Optionally, you can forget the form fields, and click the link and send an ajax call to your server.

Another option is to click multiple names to fill in the form fields, then send all selected at once.

I am sorry, I had your word doc confused with somebody else.  I see you have a check box and will make a quick update.
0
 
Scott Fell, EE MVEDeveloperCommented:
http://jsbin.com/nuruseyo/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function () {
       $('.clickme').click(function () {
           var id = $(this).attr('data-id');  //get value of id
           var fullname = $(this).attr('data-name');   // get value of name
           if ($(this).prop("checked")) {    /// detect if checked
               $('input.abc123[name="id"]').val(id);
               $('input.abc123[name="fullname"]').val(fullname);

           } else {  //if not checked, remove data from inputs
               $('input.abc123[name="id"]').val('');
               $('input.abc123[name="fullname"]').val('');

           }

       });
   });
    </script>
  <meta charset="utf-8">
  <title>Padas Q_28404746</title>
</head>
<body>
<table>
  <!-- use your asp to loop through tr 
        there are other ways to do this without using the attribute data-something
        this method helps you keep track of  your code 
       Notice the data-id from the checkbox matches the class for the inputs
   -->

  <tr><td>
    <input type="checkbox" data-id="abc123" data-name="Suzy Smith" class="clickme">
    Suzy Smith
    <input class="abc123" name="id">
    <input class="abc123" name="fullname">
    <button>Submit</button>
    </td></tr>
  </table>
</body>
</html>

Open in new window

0
 
vcurtisAuthor Commented:
Thank you
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now