How to select the text from my textbox inside a repeater using Jquery?

Question

I have a repeater and inside of it is a textbox that contains my data from the database. Of course at run-time it will generate lots of data meaning lots of textboxes too.

<asp:Repeater ID="rpter" runat="server">
  <ItemTemplate>
    <fieldset>
      <legend>
        <asp:Label ID="lblLegend" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Name")%>' Font-Bold="true" />
      </legend>
      <div style="border: single, 1px;">
        <div>
          <asp:TextBox ID="txtMessage" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
        </div>
       <div>
         <asp:Button ID="btnCopy" runat="server" Text="Copy" CommandName="Copy" OnClientClick="copyClipboard()" />
         </div>
      </div>
    </fieldset>
  </ItemTemplate>
</asp:Repeater>

What I want is to select the text from the textbox besides the copy button when I clicked the button so that I can copy it on clipboard..

function copyClipboard() {
    CopiedTxt = document.selection.createRange();
    CopiedTxt.execCommand("Copy");
}

Please can you post the relevant html generated by the repeater, otherwise we only have half the information to work with. — Rhumborl, Sep 24 '14 at 19:12
I couldnt add my code on my question above. How Can I add it? — Chinx, Sep 24 '14 at 19:20
Just copy code snippets from your Visual Studio solution and paste it in your question, i. e. "edit" your question... — Hauns TM, Sep 24 '14 at 19:23
Be sure to read this question and answer: [how-to-copy-to-the-clipboard-in-javascript](http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript). — j.f., Sep 24 '14 at 21:18

Amit Kumar · Answer 1 · 2014-09-25T14:17:09.427

you need to pass this to your function copyClipboard. so your button code will look like this

<asp:Button ID="btnCopy" runat="server" Text="Copy" OnClientClick="copyClipboard(this)"/>

and a class to your div wrapping your textbox,

<div class="texdiv">
  <asp:TextBox ID="txtMessage" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
</div>

and your js function would be

function copyClipboard(th) {
            alert($(th).parents().prevAll('.texdiv').find('*[id^=rpter_txtMessage]').val());
        }

on client click of button, you need to find it's previous textbox then you can get it's value it will give you corresponding textbox value

I tried it but still the same. Actually what I really want to do is to click the button and the text from the textbox will be selected. — Chinx, Sep 25 '14 at 14:40

MosabJ · Answer 2 · 2014-09-25T14:28:53.123

0

$(function () {
    $(".copybtn").click (function (e) {
        Var txtMsgVal = $(this).parent().parent().find(".txtMsg").text();
        // Do something with the txtMsgVal here
        alert(txtMsgVal);
    });
});

You just need a class attribute on both the button and the input (the message).

Note: I have used jQuery in this answer so you have to include the jQuery library in your source code.

Good luck ;)

edited Sep 25 '14 at 14:28

answered Sep 25 '14 at 07:03

MosabJ

80
1
9

Hi, I tried your code but I tried to alert the txtMsgVal but I get undefined value. – Chinx Sep 25 '14 at 13:02
actually what I really want to do is to focus and select the text on the textbox so that I can copy it. – Chinx Sep 25 '14 at 13:12
@Chinx I have edited the answer. You get an undefined value because the DOM is not ready. Try it now. I am looking to hear forward from you ;) – MosabJ Sep 25 '14 at 13:12
@Chinx your iD must be unique. Is the ID attribute in your source code will be in html (i.e.: ) – MosabJ Sep 25 '14 at 13:59
If so your page must contain just one (unique) ID. (You musn't use repeator). If you want to use a repeator my code must target the class. ;) – MosabJ Sep 25 '14 at 14:03
yup my ID attribute in my source code is in html. I still get undefined. I have to use a repeater because I'am loading multplie data. – Chinx Sep 25 '14 at 14:24
So can you add class="copybtn" to your button and class="textMsg" to the message input. And I will edit my aswer to match. – MosabJ Sep 25 '14 at 14:27
Now when you click on the button the val of the message is returned as an alert message – MosabJ Sep 25 '14 at 14:33
the alert message is empty. – Chinx Sep 25 '14 at 14:45
Can you please give me the generated html and I promise that I will give you the solution ;) – MosabJ Sep 25 '14 at 14:47
what do you mean by generated html? – Chinx Sep 25 '14 at 15:26
I mean open your page in browser press ctrl+u the html code is sitting there select it all and post it here – MosabJ Sep 25 '14 at 15:51
Can I email it? Gve me ur email add. – Chinx Sep 25 '14 at 16:40
I am really want to help you because you are very interested in coding ;) – MosabJ Sep 25 '14 at 16:43
@Chinx Look at the other answer I shared – MosabJ Sep 25 '14 at 18:17

MosabJ · Accepted Answer · 2014-09-25T18:14:54.733

I have to edit your ASP code and add CssClass="txtMessage" to the TextBox.
Also CssClass="btnCopy" to the Button
And removed the OnClientClick="copyClipboard()" because we will handle that in our jQuery as below:

ASP:-

<asp:Repeater ID="rpter" runat="server">
    <ItemTemplate>
    <fieldset>
        <legend>
        <asp:Label ID="lblLegend" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Name")%>' Font-Bold="true" />
        </legend>
        <div style="border: single, 1px;">
            <div>
                <asp:TextBox ID="txtMessage" runat="server" CssClass="txtMessage" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
            </div>
            <div>
                <asp:Button ID="btnCopy" runat="server" CssClass="btnCopy" Text="Copy" CommandName="Copy" />
            </div>
        </div>
    </fieldset>
    </ItemTemplate>
</asp:Repeater>

Don't forget to include jQuery library:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

And the jQuery will handle all clicks to any item with class of btnCopy and look for .txtMessage item inside the parent of the parent of the button
And select the text inside that TextBox
And return false so your click won't take you any where...

jQuery:-

$(function () {
    $(".btnCopy").click(function (e) {
        $(this).parent().parent().find(".txtMessage").select();
        return false;
    });
});

I wish that will work for you and this is the screenshot:
http://i59.tinypic.com/5ujvc9.jpg
http://i62.tinypic.com/35d4y7l.jpg

Good luck ;)

What do you get: Page refresh. Or what have you included the jquery library. Are the onclientclick there, remove it. Do you want me to post a screenshot with the full code. — MosabJ, Sep 25 '14 at 15:49
Can you send me the screenshot on my email? I couldnt open it. — Chinx, Sep 25 '14 at 18:20

How to select the text from my textbox inside a repeater using Jquery?

3 Answers3