[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
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
?
385 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 54

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 54

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 54

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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

649 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