Solved

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

Posted on 2014-04-03
5
373 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
  • 3
5 Comments
 
LVL 28

Assisted Solution

by:becraig
becraig earned 125 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now