?
Solved

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

Posted on 2014-04-03
5
Medium Priority
?
384 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 500 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 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 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 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

741 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