Update one textbox using javascript function when another changes

Question

I have a javascript function that counts characters in 2 different textboxes and puts the value in a third textbox.

This is the function is as follows:

function CountChars() {
             var subjectLength = document.getElementById("txtBoxSubject").value.length;
             var msgLength = document.getElementById("txtBoxMsg").value.length;
             document.getElementById("txtBoxCnt").value = subjectLength + msgLength;
         }

I call it from the Message text box using 'onkeyup' and it works fine.

<asp:TextBox ID="txtBoxMsg" runat="server" ClientIDMode="Static" 
              TextMode="MultiLine" onkeyup="CountChars()"></asp:TextBox>

The Subject textbox can be changed using a dropdown list or a user adding text to it. So using 'onkeyup' will not work for the Subject textbox. I tried using 'onchange' and nothing is entered in the Count text box.

This is the Subject html:

 <asp:TextBox ID="txtBoxSubject" runat="server" ClientIDMode="Static" onchange="CountChars()"></asp:TextBox>

What am I doing wrong?

How can I call the javascript function whenver the text changes in the Subject textbox?

Thanks.

UPDATE This is the Subject dropdown and the function that is called when it changes.

 <asp:DropDownList ID="ddListSubject" runat="server" ClientIDMode="Static" AutoPostBack="true" onchange="SubjectChanged();">
        </asp:DropDownList>

function SubjectChanged() {
        var strSubject = document.getElementById("ddListSubject").value;
        if (strSubject == "Custom") {
            document.getElementById("txtBoxSubject").value = "";
            document.getElementById("txtBoxSubject").focus();
         }
        else {
            document.getElementById("txtBoxSubject").value = strSubject;
        }
        CountChars(); //number appears for a second then disappears
     }

Can you provide more of the code that you are using? Is the txtBoxSubject onchange firing when you type in the box and blur it? OnChange is only triggered when the element loses focus and the value has changed. — Daved
– Daved, Commented Mar 12, 2015 at 18:44
To follow up on my previous comment: Put an onKeyUp handler on txtBoxSubject like you did txtBoxMsg, and an onChange event handler on your dropdown if it changes the value of the textbox. — Daved
– Daved, Commented Mar 12, 2015 at 18:45
I do have an "onkeyup" event handler for the subject textbox because you can add text to the textbox even if you use the dropdown. The dropdown has an onchange event already and at the end of the java function I call 'CountChars(). The number is in the count textbox for a second then it disappears. I added the code above. It looks like it does a Postback but there is nothing in my code-behind that changes the Count text box. — Gloria Santin
– Gloria Santin, Commented Mar 12, 2015 at 19:07
It is posting back on change. Your autopostback property on the dropdown is triggering it. That's why the value appears and disappears. — Daved
– Daved, Commented Mar 12, 2015 at 19:10

R P · Accepted Answer · 2015-03-12 18:46:32Z

1

it seems like you not terminating the function with semi column. use something like onkeyup="CountChars();"

answered Mar 12, 2015 at 18:46

R P

3483 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daved Over a year ago

His onKeyUp function is working fine. The issue is he wants an event to fire for the other textbox which can have a value set by user input or by selecting a dropdown value.

Gloria Santin Over a year ago

Yes...exactly! The 'OnChange' event for the Subject dropdown has the CountChars() function at the end. But the value only is in the textbox for a second.

Gloria Santin Over a year ago

Stepping thru the code-behind - the count is present after the Page_Load() method in the Default.asp.cs and after the Page_Load method completes in the Site.Master file, the value is cleared.

João Machado de Paula · Accepted Answer · 2015-03-12 19:51:33Z

0

Your .aspx are using MasterPage? The names of Asp.Net objects changing in the rendered page. Try using <% =% Objeto.ClientID>.

function CountChars() {
         var subjectLength = document.getElementById("<%=txtBoxSubject.ClientID %>").value.length;
         var msgLength = document.getElementById("<%= txtBoxMsg.ClientID %>").value.length;
         document.getElementById("<%= txtBoxCnt.ClientID %>").value = subjectLength + msgLength;
     }

Or maybe use JQuery. Look at the code below, works as you described.

Subject:
<input id="text1" type="text" />
<br />
Msg
<input id="text2" type="text" multiple style="height: 100px" />
<br />
Total: <span id="total">0</span>

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=text]").keyup(function () {
            var total = 0;
            $("input[type=text]").each(function () {
                total += $(this).val().length;
            });
            $("#total").html(total);
        });
    });
</script>

Hope this helps you

answered Mar 12, 2015 at 19:51

João Machado de Paula

518 bronze badges

1 Comment

Gloria Santin Over a year ago

I tried both versions and still no luck...The problem is when I use the dropdown to select a Subject. Then the Count is displayed then goes blank.

Gloria Santin · Accepted Answer · 2015-03-12 20:58:20Z

0

Dummy me...I removed the AutoPostBack="true" from the Dropdown! Thanks for all of your help!!

answered Mar 12, 2015 at 20:58

Gloria Santin

2,1167 gold badges63 silver badges138 bronze badges

Collectives™ on Stack Overflow

Update one textbox using javascript function when another changes

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related