Create a character counter for a repeater with a textarea control.

Question

0.00/5 (No votes)

See more:

I am having an issue trying to figure out how to create a repeater with a textarea that has a character counter using javascript. Is there no way to do this?

I have a lot of extra stuff in my javascript when trying to figure stuff out but you get the picture. Ive attached my HTML as well for the repeater. Basically the repeater is empty until a selection is submitted. The repeater is then populated with data. I programmatically populate the label with the count and from there I wanted that label to be updated with the count as the user types in the textarea. Thats where I am stuck...I can't reach the label.

ASP.NET

  <div id="uploadDiv" style="border-style: solid; border-width: 2px; border-color: inherit;">
            <asp:Repeater ID="UploadRepeater" runat="server" EnableViewState="True" OnPreRender="UploadRepeater_Prerender">

                <itemtemplate>
                    <table id="ParaRepeater">

                        <tr style="border: solid;">
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label ID="ParaNumber" runat="server" Font-Size="10px">Para No.
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtParaNum" runat="server" Width="40px" Text='<%# Eval("ParaNumber") %>'>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblLoadtoNepa" runat="server" Font-Size="10px" Width="100px">Load To Nepa-Pams
                                        </td>
                                        <td>
                                            <asp:CheckBox ID="ckSelectPara" runat="server" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblTooLong" runat="server" Font-Size="10px" Width="100px">Too Long Chars
                                        </td>
                                        <%-- <td><br /><span id="spnCharLeftcounter"  runat="server" class="counterClass "><br />
                                          <%--<asp:TextBox ID="txtTooLong" Width="20px" runat="server" CssClass="counterClass" Text='<%# Eval("CharCount")%>'>
                                              <input type="text" name="remCount" size="3" maxlength="3" value="255" readonly="" /> --%>
                            </td>
                        </tr>
                    </table>


                    </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblChap" runat="server" Font-Size="10px">Chapter (# or words)Tag 1
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtChapter" runat="server">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblPageorSheet" runat="server" Font-Size="10px">Page or Sheet Tag 2
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtPageSheet" runat="server">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblParagraphNumber" runat="server" Font-Size="10px">Paragraph Para# Tag 3
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtParagraphNumber" runat="server">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblSentenceBullet" runat="server" Font-Size="10px">Sentence Bullet tag 4
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtSentenceBullet" runat="server">
                                        </td>
                                    </tr>
                                </table>
                            </td>

                    <td>
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtParaVerbatim" runat="server" Width="300px" Height="200px" TextMode="MultiLine"  onkeyup="javascript:countDownSum(this);" CssClass="counterClass" Rows="10" MaxLength="2000" Text='<%# Eval("FieldText")%>'>
                                   <%-- <asp:TextBox ID="txtParaVerbatim" runat="server" Width="300px" Height="200px" TextMode="MultiLine" onkeyup="javascript:updateCount(this);" onkeydown="javascript:updateCount(this);"  Rows="10" MaxLength="2000" Text='<%# Eval("FieldText")%>'>--%>
                                    <div id="divcounter">
                                        <asp:Label runat="server" Text="Characters Left:"><asp:Label ID="counter" runat="server" Text='<%# Eval("CharCount")%>' CssClass="counterClassDisplay"></div>
                                    <asp:Label ID="characterLeft" runat="server" CssClass="counterClass">
                                    <span id="characters"></span>

                                </td>
                            </tr>
                        </table>
                        </td>
                    </tr>
                    </table>
                </itemtemplate>

</div>

What I have tried:

Got this from another article posting. Tried to make it work but stuck at last part.

JavaScript

<script type="text/javascript">

        function RepeaterData() {
            var size = $('.nameLabel').length;
            for (i = 0; i < size; i++) {
                var name = $('.nameLabel').eq(i).text();
                var id = $('.IdLabel').eq(i).text();
                var mylabel = "Don't know how to get to write to my label?"
            }
        }

    </script>

Posted 21-Jul-16 3:50am

marine88

Updated 21-Jul-16 4:44am

Vincent Maverick Durano

v3

Add a Solution

Comments

ZurdoDev 21-Jul-16 9:51am

What are you trying to do?

Karthik_Mahalingam 21-Jul-16 9:54am

do you want to display the count on page load or on text change?
post the markup code

2 solutions

Solution 1

$('.myLabel').eq(i).html("Put your text here");

Posted 21-Jul-16 3:58am

F-ES Sitecore

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-07-21T04:44:00

try this

JavaScript

<script>

        $(function () { RepeaterData(); });

        function RepeaterData() {
            var textAreas = $('[id*="txtParaVerbatim"]');
            debugger;
            var labels = $('.counterClassDisplay');
            var count = textAreas.length;
            var max = 2000;
            for (var i = 0; i < count; i++) {
                var charLength = textAreas[i].value.length;
                var remaining = max - charLength;
                labels[i].innerText = remaining;
            }
        }


        function countDownSum(textbox) { 
            var value = textbox.value;
            var length = value.length
            var max = 2000;
            var remaining = max - length;
            $(textbox).parent().find('.counterClassDisplay').text(remaining);
        }


    </script>

Create a character counter for a repeater with a textarea control.

2 solutions

Solution 3

Solution 1

Add your solution here

Preview 0

Create a character counter for a repeater with a textarea control.

2 solutions

Solution 3

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us