Solved

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

Posted on 2014-04-03
5
382 Views
Last Modified: 2014-04-18
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
Comment
Question by:vcurtis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 29

Assisted Solution

by:becraig
becraig earned 125 total points
ID: 39976955
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
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 375 total points
ID: 39977020
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
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 375 total points
ID: 39977030
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 375 total points
ID: 39977041
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
 

Author Closing Comment

by:vcurtis
ID: 40009868
Thank you
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question